如果容器没有定义高度，为什么CSS Grid项不会换行？

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