Why does the last row in my CSS grid layout take up less height than the rest of the rows?

Question

I have a grid layout which has the following issue:

The last row within the grid does not take up the correct amount of height, so it does in all of the previous rows before it.

This is the styling applied to my grid:

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
    grid-gap: 2% 10%;
    padding: 25px 5px 30px;
}

This grid sits within a container that is set to 100%, which due to this issue grid takes on a value of 1648px in height. I would like the grid to contain all of the content as seen in the screenshot.

I have tried setting the grid-template-rows to different values, though this does not make any difference.

body {
  height: 100%;  
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  grid-gap: 2% 10%;
  padding: 25px 5px 30px;
  bordeR: 2px solid black;
}    

.outer {
  height: 100%;
}

.elements {
  height: 200px;
  background-color: lightblue;
}

<div class='outer'>
  <div class='grid-container'>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
    <div class='elements'></div>
  </div>
</div>

Any help in explaining why the height of the last row of my grid behaves differently and the solution to this problem would be much appreciated.

@LGSon "should be" is not the same as "must be"... (voted to leave open) — feeela, Oct 06 '19 at 10:11
@feeela Btw, no one _must_ anything, unless one want to comply with SO guidelines, and if not, most often downvoted and no answer. I try to uphold SO guidelines, which is quite clear in this case, and you can do how you want. — Asons, Oct 06 '19 at 10:19
@KoolTRaps -- Great, I deleted my comments in our initial dialog, upvoted and updated the tags list, so the one's with `css-grid` knowledge will find your question. — Asons, Oct 06 '19 at 10:31
This is, I suspect, related to the `grid-gap` being defined in **percent** - https://stackoverflow.com/questions/53128090/css-grid-height-wrong-when-using-percent-as-grid-gap - If this is changed to `vh/vw` then it seems to be work but may not be what the OP is after. — Paulie_D, Oct 07 '19 at 09:12

score 0 · Accepted Answer · answered Oct 06 '19 at 13:57

0

changing your padding will give you a desired result

i changed this and it spaces all content inside your table.

padding: 25px 5px 50px; try that out

answered Oct 06 '19 at 13:57

sao

1,835
6
21
40

Yes that does work for elements with the height of 200px. Though if you were to change the height to 300px for example, you then have to increase the padding again. It doesn't explain why the height of the grid container is calculated to be this? Surely it should fit around the elements? – Tom M Oct 06 '19 at 15:39
for sure. just change them then. or you can use percentages. or you can use a variable in JS to set the stye values dynamically, this way you could change one and the other would always auto-adjust in the code. – sao Oct 06 '19 at 15:43

Why does the last row in my CSS grid layout take up less height than the rest of the rows?

1 Answers1