Why children in css grid are taking 100% horizontally but only 90% vertically of their container?

Question

I don´t understand why horizontally everthing seems perfect but vertically as you can see in the image, there´s no margin. If this worked for the grid to take the whole width:

 grid-template-columns: repeat(3, 30%);

Why this didn´t work for taking the whole height?:

grid-template-rows: repeat(3, 30%);

This is the code: The .box is the container and the .card are the childs:

.box{
  /*
    margin: 20vh auto;
    text-align: center;
    width: 75%;
    max-width: 650px;
    height: 60vh;
*/
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(3, 30%);
    grid-gap: 12px;
    justify-content: center;
}

.card{
    border: 2px solid gray;
    height: 100%;
    border-radius: 6px;
}

<div className="box">
            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />
        </div>

@Michael_B Could be solution but then it doesn´t leave me with space at the borders. I am looking to have that space gap that I have in the left, right, and bottom, also at the top. — J. Cake, Oct 25 '19 at 17:43
Please post enough code to reproduce the problem. Padding on the container will probably solve that problem. — Michael Benjamin, Oct 25 '19 at 17:45

score 2 · Accepted Answer · answered Oct 27 '19 at 14:01

You need to set a height on the container with the class of box and use fr as a unit instead of percent. You need the container height so the grid cells can calculate their height from it. If you use fr instead of percent the grid gaps are first subtracted from the container width/height before the remaining space is being divided according to the settings for grid-template-columns and grid-template-rows. Here is a working example:

<div class="box">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

body {
  margin: 0;
}

.box {
    background-color: hotpink;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 12px;
}

.card{
    border: 10px solid gray; // even with 10px or more nothing exceeds the container boundaries any more
    //height: 100%; // you do not need this, since the height is being calculated as a fr of the container height
    //box-sizing: border-box; // if you decide to set a height nonetheless you have to change box-sizing so the borders are not taking up extra space
    background-color: skyblue;
    border-radius: 6px;
}

score 0 · Answer 2 · answered Oct 25 '19 at 17:08

0

Try replacing the 30% with 1fr

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

answered Oct 25 '19 at 17:08

Stefan

160
6

Tried that but then there´s no space for a margin gap. That´s why I use 30% so there´s at the end a 10% left for space – J. Cake Oct 25 '19 at 17:40
You can use padding inside the grid instead of margin outside the grid. – Stefan Oct 25 '19 at 17:46
I can apply it to each children you mean? – J. Cake Oct 25 '19 at 17:47

Why children in css grid are taking 100% horizontally but only 90% vertically of their container?

2 Answers2