CSS columns property displays different column count based on child elements

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