html {
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
}

main > div {
  height: 3em;
  width: 5em;
  border: 1px solid red;
}

<body>
  <main>
    <div></div>
  </main>
</body>

I want to know how the vertical space around the div was added automatically. I know it can be fixed by setting repeat(3, auto) to repeat(3, min-content), but what exactly caused the spacing issue?

CodePudding user response：

I hope i can clear this doubt by this 4 snippets

Run all this 4 code,and note the vertical height

I have highlighted with colors for all three code-for you to understand

html {
  height: 100%;
  width: 100%;
  background-color: red;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
  background-color: green; 
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  background-color: blue;
}

main > div {
  height: 3em;
  width: 5em;
  border: 1px solid red;
}

<body>
  <main>
    <div>1</div>
    <div>2</div>
    <div>3</div>

  
  </main>
</body>

html {
  height: 100%;
  width: 100%;
  background-color: red;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
  background-color: green; 
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  background-color: blue;
}

main > div {
  height: 3em;
  width: 5em;
  border: 1px solid red;
}

<body>
  <main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  
  </main>
</body>

html {
  height: 100%;
  width: 100%;
  background-color: red;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
  background-color: green; 
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  background-color: blue;
}

main > div {
  height: 3em;
  width: 5em;
  border: 1px solid red;
}

<body>
  <main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    
  </main>
</body>

html {
  height: 100%;
  width: 100%;
  background-color: red;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
  background-color: green; 
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  background-color: blue;
}

main > div {
  height: 3em;
  width: 5em;
  border: 1px solid red;
}

<body>
  <main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
  </main>
</body>

Understood the difference?

But I will say, the difference is only in the number of div I put in the main,it changes the space(inversely proportional)

So the reason is auto tries to give the space it can afford, and so if it can give more space (more space if less div) it will leave some leftover space in top and bottom of div

while min-content gives space that is only needed by div

By now after reading these you would have known that,

leftoverspace = (HeightOfMain-(HeightOfDiv * NumberOfDiv))/NumberOfDiv

the above formula gives space for top bottom of div if you want for only to then,

leftoverspace = (HeightOfMain-(HeightOfDiv * NumberOfDiv))/(NumberOfDiv * 2) Note that number of div is number of vertical div and not total,so if you take my last code snippet,number of div=4

in your case

HeightOfMain=100vh
NumberOfDiv= 1
HeightOfDiv = 3em

so leftoverspace = (100vh-(3em * 1))/(1 * 2)

CodePudding user response：

You're applying a fixed height and width to your div, that's why the rest of the grid cell contains that empty space.

main > div {
  height: 3em;
  width: 5em;
}

If you want the div to fill out the whole grid cell, then you should set both height and width to 100%.

main > div {
  height: 100%;
  width: 100%;
}

Your modified snippet:

html {
  height: 100%;
  width: 100%;
}

body {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1em 1fr;
  grid-template-areas: "hd hd" "as mn";
  height: 100%;
  width: 100%;
}

header { grid-area: hd; }
aside  { grid-area: as; }

main {
  grid-area: mn;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
}

main > div {
  height: 100%;
  width: 100%;
  border: 1px solid red;
}

<body>
  <main>
    <div></div>
  </main>
</body>