CSS 网格不受 padding-bottom 影响

Question

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

然而，不管对网格容器应用了任何填充，最后一个元素始终位于页面底部（填充应用于顶部、左侧和右侧，但不应用于底部）。

有人知道我错在哪里吗？

#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

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

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

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

实际上，（就像@Shristi 提到的）问题的发生是因为网格容器没有到达项目的底部。这是因为 grid-auto-rows 设置为 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
}

工作示例：here

CSS 网格不受 padding-bottom 影响

CSS grid not affected by padding-bottom

html

css

css-grid

grid-layout