How to adjust column width to content size using css columns?

Question

I'm using css columns (not a table) to create a list that spans across 3 columns, like so:

HTML

<ul>
  <li>- Item 1 - this is the item's name here.</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>

CSS

ul {
  column-count: 3;
  max-width: 40rem;
}

How it displays

However, all columns are of equal width and this causes a difference in spacing between them. How can I adjust css columns to get something like this, where each column's width depends on the content?

What I'm trying to achieve:

Thanks!

EDIT: I should mention that I need to use CSS columns because these list of items are being generated dynamically through a CMS, so would like to find a purely CSS solution if possible to avoid having to introduce Javascript to manipulate the DOM. Thank you.

Milky

I just found that this maybe has already been answered here #23795213, using flex-growth and flex-shrink styles – Hamlen

You can't achieve that with columns. CSS columns are designed for content that flows between equal columns. – Dolerite

Answer 1

For infos only since it is only experimental at this time :

this can be tested in few browsers,

see also http://caniuse.com/#search=grid

A tutorial among others https://css-tricks.com/snippets/css/complete-guide-grid/

So display:grid could help someday: But still, the layout is sprayed rows per rows

ul {
  padding: 1em ;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-gap: 0 2em;
}

<ul>
  <li>- Item 1 - this is the item's name here.</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>

---

If you use a routine on server side or javascript to count your items, then you may force them to be sprayed column per column : ( example via js / jQuery : http://codepen.io/gc-nomade/pen/BpZZQW play and add/remove lis )

ul {
  padding: 1em 1em 1em 4em;
  margin: 2em;
  border: solid 1px;
  list-style-type: none;
  display: grid;
  grid-gap: 0 2em;
  padding:1em ;
  grid-template-columns: 0 auto auto 1fr;/* last one set to use all room left */
  grid-auto-flow: column;
}

/* span a first-element throgh all rows , to be injected and updated from server side or via javascript on the fly */
ul:before {
  content: '';
  grid-column: 1;
  /* short hand : grid-row:1/4;*/
  grid-row-start: 1;
  grid-row-end: 4;/* value to updated to match row numbers + 1 */
}

<ul>
  <li>- Item 1 - this is the item's name here.</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>

Certify