使用固定的列数，在上一列中已经添加了固定数量的项目后，下一个项目应该转到下一列

Question

我有多个列表，并且由于大多数列表都更大，所以我决定设置 column-count: 3（这对我的列表来说总体上很好 UI）。

现在有一个问题来了，如果我的list-items怎么办（在某些情况下非常少，比如只有10个）。在那种情况下，我希望在切换到下一列之前必须至少添加一列中的 6 个项目。如果我给列数：3，它除以 10/3 = 4，并且在 4 之后项目切换到下一列。在这种情况下，我希望至少有 6 个项目必须放在第 1 列中（这样 UI 看起来不错），接下来的 4 个项目在第 2 列中，仅此而已。

注意：我无法更改 column-count: 3，因为它已针对代码进行了通用化。而且，如果我什至手动覆盖，使用 column-count:2，UI 现在（因为宽度不同于 3 时）将被更改（每列宽度）；

ol {column-count:3}

<ol>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
</ol>

<ol style="column-count:2">
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
</ol>

<p>I want atleast 6 items in a column, before it changes or goes to next column, and so on ...</p>

Answer 1

这是你想要的吗？

ol {
  display: grid;
  grid-template-rows: repeat(6, min-content);
  grid-auto-flow: column;
  /* change from 1fr -> 100px to have fixed width */
  grid-auto-columns: 100px;
}

<ol>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
</ol>

<hr />

<ol>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
</ol>

<hr />

<ol>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>orange</li>
  <li>pink</li>
</ol>

<p>I want atleast 6 items in a column, before it changes or goes to next column, and so on ...</p>

使用固定的列数，在上一列中已经添加了固定数量的项目后，下一个项目应该转到下一列

With a fixed column-count, the next item should go to next column after a fixed no of items have already been added in previous column

html

css

css-multicolumn-layout