How to split a list in two columns after specific element?-CodePudding

I have a list with 6 items, and I want to arrange it into a two-column layout. And the split needs to happen after element number 3. So, 3 li elements in the left column, and 3 elements in the right column. How do I achieve this? I can't edit the HTML at all.

This is the HTML layout:

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

CodePudding user response：

You can use column-count to decide how many columns you want your ul to have.

.columns {
  width: 150px;
  column-count: 2;
}

<div >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</div>

CodePudding user response：

You can also use display: grid

ul {
  display: grid;
  grid-template-columns: 50% 50%;
}

CodePudding user response：

Simply use the column-count CSS property like this

ul{
 -webkit-column-count: 2;
 -moz-column-count: 2;
 -o-column-count: 2;
  column-count: 2; 
}

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

CodePudding user response：

you would need to use a for loop to keep track of what row you're on before the split happens. I like to use php because it's a generic oop language. You can use the example here: https://www.w3schools.com/php/php_looping_foreach.asp .

Then you can use a UI framework like boostrap to get your column arrangement: https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp.

Once you combine those two concepts, you should be on your way.

Good luck.