trying to break the li for every 3 elements in a row - html

Question

I have this code, it is working but not entirely
ul {
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
}
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
The problem is with the above, if everything is divided in 3 rows, if I have an extra element, it is not creating a new line and adding only 1 element to it, neither it does for 2, it always seems to have columns to be shown in 3 instead of li breaking at extra ones.
I am open to div, or span, or li if my code should work as to what I am trying to do with li, I will apply css to hide that piece of code which shows bullets.

Answer 1

The problem is that the columns are each being populated completely before moving on to the next column. This will leave you with an unbalanced final column.
By making the ul element a flex container, the li elements are displayed side by side. The flex-wrap property set to wrap allows the li elements to wrap to a new line when the container width is exceeded.
The flex-basis property set to calc(100% / 3) specifies that each li should take up one-third of the container's width.
Please see if this CSS works for you:
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex-basis: calc(100% / 3);
}