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

Question

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

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

但是现在我只能在容器上定义一个高度才能让它工作。

下面是一个片段。

除非您取消注释容器的 height 规则，否则网格项目永远不会换行，但我希望容器 grow/shrink 在网格换行后适合。

.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

I want the items to populate columns until it hits the container width, then wrap into rows.

那你为什么要使用 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 网格项目不换行？

Why do CSS Grid items not wrap if container has no defined height?

css

grid-layout

css-grid