How can i make my ul li to create new column when the li reaches 5 contents?

Question

This is my sample code

ul li{
    list-style: none;
  }

<ul>
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 
  <li>LINE ONE</li> 

  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
  <li>LINE TWO</li> 
</ul>

and this is what i am trying to achieve without using grid system.

i am not sure if there is a existing question similar to mine, if there is please leave a link because i've been trying to search it and i just dont know the right keyword for this problem. Thank you

always 2 columns or you will need 3 if it's more than 10 items ? — Temani Afif, Oct 03 '21 at 13:03
Is the data dynamically generated? Or it is just static HTML and CSS? — Mohammad Dohadwala, Oct 03 '21 at 13:12
https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns — Idov Mamane, Oct 03 '21 at 13:17
Could you say why you aren't able to use grid and which order do you want the elements to show? First 5 vertically then second 5 in second column or other way? — A Haworth, Oct 03 '21 at 13:31
The OP didn't say they cant use *grid*, just not a **grid system**. — Paulie_D, Oct 03 '21 at 13:43
it's so sad that you are so mad for not getting a quick reply, the fact that people do sleep to rest. @AlonEitan — Ken Torres, Oct 03 '21 at 16:43

score 1 · Answer 1 · answered Oct 03 '21 at 13:41

CSS-Grid can do that. Just define a maximum of 5 rows.

ul li {
  list-style: none;
}

ul {
  display: grid;
  grid-template-rows: repeat(5, min-content);
  grid-auto-flow: column;
}

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>2</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>3</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
  <li>4</li>
</ul>

Thank you for the idea Mr. Paulie_D – Ken Torres Oct 03 '21 at 20:46 — Ken Torres, Oct 03 '21 at 20:46

How can i make my ul li to create new column when the li reaches 5 contents?

1 Answers1