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;
}

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.

user_8334663 · Answer

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

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

1 Answers