Question

我在网格布局中有一个项目列表，并且网格容器设置了宽度，但没有设置高度。

我希望项目填充列，直到达到容器宽度，然后包装成行。

但是现在，只有在容器上定义高度时，我才能使它工作。

下面是一个片段。

除非取消注释容器的height规则，否则网格项目永远不会包装，但是我希望容器在网格包装后能够增长/缩小以适应容器。

.box {
  height: 150px;
  width: 150px;
  background-color: red;
}

.container {
  width: 500px;
  /*   height: 500px; */
  background-color: blue;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 1

我希望项目填充列，直到达到容器宽度，然后包装成行。

那您为什么要使用grid-auto-flow: column和grid-template-rows？

使用grid-auto-flow: column，网格项将垂直流动，填充行，然后创建新列。您是说要反向：填充列，然后创建新行。因此，请坚持使用默认的grid-auto-flow: row。

沿着同一行，从grid-template-rows切换到grid-template columns。您要自动填充列而不是行。

网格容器上不需要高度。

实际上，您也不需要这些项目的宽度或高度。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  grid-gap: 5px;
  width: 500px;
  background-color: blue;
}

.box {
  background-color: red;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

更多详细信息：Make grid container fill columns not rows

如果容器没有定义的高度，为什么CSS Grid项不能包装？

1 个答案: