I am facing an issue with my code. It's functional, but not completely.
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>
</ul>The issue lies in the fact that when there is an extra element beyond multiples of 3, it does not create a new row for them. Instead, it tries to fit everything into 3 columns, causing some elements to look out of place.
I'm open to using divs, spans, or list items if they help resolve this problem. I can apply CSS to hide the bullets associated with the list items to achieve the desired layout.