CSS网格不受底部填充的影响

Question

我使用CSS网格，使用网格自动行将动态数量的元素定位到行中。

然而，最后一个元素总是靠着页面的底部放置，而与应用于网格容器的任何填充无关(填充应用于顶部、左侧和右侧，但不应用于底部(。

有人知道我哪里错了吗？

https://codepen.io/wrgt1/pen/XWjEwXX

#container {
position: relative;
width: 100%;
}
.grid {
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 25%;
grid-template-columns: 1fr 1fr;
padding: 50px;
}
.item {
width: 250px;
height: 250px;
background: red;
}

<div id="container">
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

Answer 1

实际上，(就像@Shristi提到的那样(问题的发生是因为网格容器没有到达项目的底部。这是因为网格自动行设置为25%。在第四行之后，这会填充100%，其他所有东西都会移出容器。所以你应该更改你的代码如下：

.grid {
// box-sizing: border-box;
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 250px; // change this!
grid-template-columns: 1fr 1fr;
grid-gap: 50px; // use this for the spacing in between
padding: 50px; // use this for the spacing top, bottom, left and right of the grid
}

工作示例：这里是

Answer 2

这是因为网格的高度小于其内容的高度。将height添加到网格，并将margin-bottom添加到网格中，而不是填充。希望这能帮助

.grid {
width: 100%;
display: grid;
grid-auto-flow: row;
grid-auto-rows: 25%;
grid-template-columns: 1fr 1fr;
padding: 50px;
height: 100%;
margin-bottom: 50px;
overflow-y: scroll;
}

Answer 3

有时填充在HTML中不起作用，因此在这种情况下，您可以制作div或使用br标记。

<div class="spacing" style="padding-bottom: 100px;"> 
// or do br where you want it.
<br>