I’m using the CSS columns property to display list items in a 4-column layout. However, the number of columns displayed changes depending on the number of <li>
children.
ul {
columns: 4;
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin: 0;
}
<h2>With 9 items (Displays 3 columns)</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<h2>With 8 items (Displays 4 columns)</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
Expected:
The columns: 4 rule should ensure that the <ul>
always displays 4 columns, regardless of the number of <li>
items.
Actual:
With 9 items, the <ul>
displays 3 columns, but with 8 items, it displays 4 columns. The browser seems to adjust the column count based on the content, rather than maintaining a consistent 4-column layout as expected.
Is there a way to keep the column count at 4 regardless of the number of list items?
You need to sign in to view this answers
Leave feedback about this