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

user_2685914 0
Viewed 111

I have got multiple lists, and as most of the lists are bigger, so I decided to set column-count: 3 (this is giving good UI for my lists in general).

Now one issue comes, What if my list-items (in some cases are very less, say only 10). In that scenario I want that at-least 6 items in a column must be added before switching to next column. If I give column-count: 3, it is dividing 10/3 = 4, and after 4 the items are switching to next-column. In this scenario, I want that at-least 6 items must go in 1st column anyways (so as the UI to look good), next 4 in 2nd-column and that's it.

Note: I cannot change column-count: 3 as it is generalized for code. And, if manually even I override, with column-count:2, the UI now (as widths are different than when it was 3) will be changed (per column-width);

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>

css-multicolumn-layout css html
1 Answers

Is this what you want?

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>

user_102892650
Related