创建一个按列流动的 CSS 网格，具有基于内容的动态列和行

Question

我有一个动态数量的元素（所有相同的维度）。我想将它们放置在网格中，以便它们按列排序，列数基于可用容器宽度，行数基于元素数。

例如，假设有 9 个元素：

1 4 7
2 5 8
3 6 9

但是如果容器宽度扩大：

1 3 5 7 9
2 4 6 8

或收缩：

1 6
2 7
3 8
4 9
5

当项目按行而不是按列定位时，这可以正常工作。此外，如果我明确设置行数，它工作正常，但如果我对行和列使用自动填充，它只会在一行中显示所有内容。

这是我希望呈现为 3x3 网格的一个简单示例：https : //codepen.io/anon/pen/ZxPQNd

1 4 7
2 5 8
3 6 9

1 3 5 7 9
2 4 6 8

Answer 1

使用column-width属性的CSS 多列布局可以实现您想要的布局。演示：

#grid {
  border: 1px solid red;
  column-width: 100px;
  column-gap: 10px;
}

#grid > div {
  break-inside: avoid-column; /* Prevent element from breaking */
  page-break-inside: avoid; /* Prevent element from breaking in Firefox */
  background: lime;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Answer 2

当项目按行而不是按列定位时，此方法效果很好。

这是因为默认情况下，块元素占用其父元素的整个宽度。

但这种行为并没有延伸到身高上。默认情况下，大多数元素都是其内容的高度（即没有额外的空间）。

本质上，您的容器设置为width: 100%和height: auto。对于垂直轴中的行行为添加height: 100vh.

更多信息：如何使 div 的浏览器窗口高度为 100%？

#grid {
  width: 320px;
  border: 1px solid red;
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 100px);
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-columns: 100px;
  grid-auto-rows:  100px;
  height: 100vh; /* NEW */
}

#grid > div {
  background: lime;
}

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

就基于屏幕尺寸的网格项目重新排序而言，grid-auto-flow: row项目将响应容器宽度。使用 时grid-auto-flow: column，物品将响应容器高度。要使列流动项目响应宽度调整大小，需要一些技巧。

详细信息：使网格项填充列而不是行