如何像 Flexbox 一样使网格中的列“空间均匀”?

问题描述 投票:0回答:2

我有这个网格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;
 }

如何使用网格响应式地执行此操作?

我知道我可以更改网格列间隙,但这看起来很不稳定

css css-grid grid-layout
2个回答
8
投票

使用

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>


2
投票

考虑使用

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>

© www.soinside.com 2019 - 2024. All rights reserved.