如果列数固定，则在上一列中已添加固定的项目数后，下一个项目应转到下一列

问题描述

我有多个列表，并且由于大多数列表较大，所以我决定设置column-count: 3（这通常为我的列表提供了良好的用户界面）。

现在出现一个问题，如果我的list-items（在某些情况下很少，比如说10）怎么办？在这种情况下，我希望在切换到下一列之前必须在列中至少添加6个项目。 如果我给出column-count：3，则它除以10/3 = 4，并且在4之后，这些项目将切换到下一列。在这种情况下，我希望无论如何至少要在第1列中添加6个项目（这样UI才能看起来不错），然后在第2列中添加下4个。

注意：我无法更改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>

解决方法

这是您想要的吗？

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>