我希望每个网格元素都适合它的内容宽度(400px),并保持自动填充。我该怎么做?
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
grid-gap: 10px;
width: 100%;
}
<div class="container">
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
</div>
最佳答案
只需将 minmax(240px, auto)
替换为固定宽度 400px
。
请注意,当视口(viewport)的宽度不是 400 的精确倍数时,这会产生间隙,但仍会添加元素以尽可能多地填充空间。
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, 400px);
grid-gap: 10px;
width: 100%;
}
<div class="container">
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
<div style="background: aqua; height: 100px;">
<div style="width: 400px; height: 100px;"></div>
</div>
</div>
关于css - 在 CSS Grid 中将列宽设置为内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56980999/