我正在尝试制作一个网格，但网格总是溢出它内部的 div。太简单了，我不明白问题是什么。列 div 有背景颜色，因此您可以看到它的位置，但您也可以在元素检查器中看到它。
我尝试了多种解决方案并在网上查看，但找不到解决方案。这是我尝试过的方法以及为什么它不起作用：
height:100%在网格或列类的底部添加了两个空网格单元
overflow:auto在列类上制作了一个滚动条
在底部创建一个<br>withclear:both没有做任何事情
.column {
margin-top: 3%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(200, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));
grid-auto-rows: (0px, 1fr);
grid-gap: 2%;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
.container p {
word-wrap: break-word;
}
.centered {
text-align: center;
}<body class="plum">
<br>
<div class="column">
<div class=" grid">
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I like memes again</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: this is a post</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: This is the first post from the website</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: I have added this</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I'm joe</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: Okay</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: joe</p>
<p>Text: I like memes too</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: Caps test</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: OKAYYYYYYYYYYYYYYYYYYYYYYYY</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: sssssssssssssssssss</p>
</div>
</div>
<div class="card">
<div class="container">
<p>Poster: tester</p>
<p>Text: SSSSSSSSSSSSSSSSSS</p>
</div>
</div>
</div>
</div>
<p class="centered"><a href="submitform.php">Add new</a></p>这是由 引起的grid-gap。您正在使用grid-gap: 2%;它在列和行之间应用百分比间隙。正如我们所看到的，这对于网格本身来说非常有效，并且网格在其总高度中包括行之间 2% 的间隙。
然而，当容器没有定义的高度时，使用百分比来表示高度是有问题的。这里发生的情况是容器无法识别％间隙高度并且没有将其包含在其总高度中。
您可以通过使用定义的高度值轻松修复它，例如
grid-column-gap: 2%; // you can still use % for the column gap
grid-row-gap: 20px; // fixed height for row gap
工作示例：
grid-column-gap: 2%; // you can still use % for the column gap
grid-row-gap: 20px; // fixed height for row gap
.column {
margin-top: 3%;
margin-left: 20%;
margin-right: 20%;
background-color: rgba(200, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr));
grid-auto-rows: (0px, 1fr);
grid-column-gap: 2%;
grid-row-gap: 20px;
}
.plum {
/* background-color: plum; */
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
.container p {
word-wrap: break-word;
}
.centered {
text-align: center;
}宽度：
使用 % 表示列间隙有时也会导致问题，如果使用 % 定义列，则不考虑间隙。
但是，您已正确设置列，因此这不是网格在较小屏幕上延伸出容器的原因。这是由于此处将最小网格设置为 450px 造成的：
grid-template-columns: repeat( auto-fit, minmax(450px, 1fr));
300px 左右的值可能更合适，因为它适合绝大多数移动屏幕（320px通常被认为是可容纳的最小宽度，但也不要忘记元素外部的边距）。