为什么CSS网格布局中的最后一行所占的高度小于其余几行？

Question

我的网格布局存在以下问题：

网格中的最后一行没有占据正确的高度，因此在它之前的所有前几行中都没有。

这是应用于我的网格的样式：

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

此网格位于设置为100％的容器中，由于此问题，网格的高度值为1648px。我希望网格包含屏幕截图中看到的所有内容。

我尝试将grid-template-rows设置为不同的值，尽管这没有任何区别。

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>

任何有助于说明为什么网格最后一行的高度表现不同的原因，对于解决此问题的解决方法，我们将不胜感激。

Answer 1

更改填充将为您带来理想的效果

我对此进行了更改，并将所有内容放在表中。

padding: 25px 5px 50px;试试看