Question

我有如下基本网格设置：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
  grid-gap: 1rem;
}

当网格自动分解成新行时，我要么希望新行上的元素占据一定比例的空间，要么希望它们居中以使它们看起来不错。

例如，如果一行中有3个元素，那么我希望每个元素都占用33％的容器空间。但是，当网格破裂并且新行上只有1个元素时，我希望该元素要么占据行宽的100％，要么至少看起来居中-与将元素全部放在左侧，仅占用1fr的空间。

类似地，如果新行上有2个元素，则每个元素应占据行空间的50％或两者合起来应该居中。

我不知道总共有多少个元素。理想情况下，该解决方案应至少使用1个元素，最多可以包含任意数量的元素。

如果有人有任何想法，请告诉我。谢谢。

Answer 1

这是flexbox的工作，我认为使用CSS网格实现起来并不容易：

.grid-container {
  display: flex;
  flex-wrap:wrap;
  border:1px solid;
  margin:2px;
}

.grid-container>div {
  height: 50px;
  background: red;
  margin: .5rem;
  flex: 1 1 calc(33% - 1rem);
}

<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

如果您希望元素居中，只需执行以下操作：

.grid-container {
  display: flex;
  flex-wrap:wrap;
  border:1px solid;
  margin:2px;
  justify-content:center;
}

.grid-container>div {
  height: 50px;
  background: red;
  margin: .5rem;
  flex: 0 1 calc(33% - 1rem); /*disable the flex-grow*/
}

<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid-container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS网格列拉伸以填充整行/还是居中？

1 个答案: