我有这个网格CSS
.grid {
display: grid;
grid-column-gap: 50px;
grid-template-columns: repeat(3, 1fr);
}
位于宽度为 500px 的 div 中
但我注意到网格中的第一个项目“拥抱”div 的左边缘,但最右边的项目没有接触 div 的边缘。
在 Flexbox 中我可以通过(接近足够)实现这一点:
.flex {
display: flex;
justify-content: space-between;
}
如何使用网格响应式地执行此操作?
我知道我可以更改网格列间隙,但这看起来很不稳定
使用
auto
代替 1fr
,相同的 justify-content
将像 Flexbox 一样工作:
.grid {
display: grid;
grid-column-gap: 50px;
grid-template-columns: repeat(3, auto);
justify-content:space-between;
}
<div class="grid">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
考虑使用
auto-fit
关键字通过扩展列来将列容纳到可用的行空间中。
.grid-container {
display: grid;
grid-column-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.grid-item {
background-color: blue;
padding: 30px;
}
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>