2

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Deadpool
  • 7,811
  • 9
  • 44
  • 88

1 Answers1

1

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>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • @Hao_Wu: It works fine, just I need the width of each column to be same, in case of 2 columns they are big-width, if 4 they are pretty-small widths; Can you propose a solution, where at-least their widths can be made fixed? – Deadpool Sep 17 '20 at 08:47