我有这个网格 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>
关于javascript - 如何像 flexbox 一样在网格 "space-evenly"中创建列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70770416/