html - 如何自动流动：列但指定列

Question

我想要一个 CSS 网格，逐列呈现项目，其中不假定最大列数和行数。尽管有一些我希望不需要的解决方法，但我的版本低于我能想出的最佳版本：

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
}

.item {
  margin: 1em;
}

.column {
  display: contents;
}

.clear {
  grid-row-end: -1;
}

<div class="grid">
  <div class="column">
    <div class="item">A1</div>
    <div class="item">A2</div>
    <div class="clear"></div>
  </div>
  <div class="column">
    <div class="item">B1</div>
    <div class="item">B2</div>
    <div class="item">B3</div>
    <div class="clear"></div>
  </div>
  <div class="column">
    <div class="item">C1</div>
    <div class="clear"></div>
  </div>
</div>

如你看到的：

• CSS 硬编码使用grid-template-rows. 如果项目的数量超过硬编码的行数，删除它会导致项目出现在不正确的列中，而使硬编码的数字非常大（例如，1000）将适用于列中所有实际数量的项目，但会导致在文档底部添加大量空白。
• 我不想在每一列中都有一个“清晰”的 div 来强制自动放置到下一列。

请注意，仅让每列自行布局（使用 flexbox 或 CSS Columns 之类的东西）是行不通的，因为网格项目（可能具有不同的高度）保持与它们的水平邻居对齐是很重要的。

标签： htmlcsscss-grid

Answer 1

clear您可以通过设置每列的第一个元素的行来轻松摆脱该元素，然后您可以考虑大量行的技巧，但要auto调整大小而不是1fr. 如果您不使用行间距，您将不会有任何空白：

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(1000, auto);
}

.item {
  margin: 1em;
}

.column {
  display: contents;
}

.column .item:first-child {
  grid-row: 1;
}

<div class="grid">
  <div class="column">
    <div class="item">A1</div>
    <div class="item">A2</div>
  </div>
  <div class="column">
    <div class="item">B1</div>
    <div class="item">B2</div>
    <div class="item">B3</div>
  </div>
  <div class="column">
    <div class="item">C1</div>
  </div>
</div>