Как отрегулировать ширину столбца до размера содержимого, используя столбцы css?

Question

Я использую CSS столбцы (не таблицы), чтобы создать список, который охватывает через 3 колонки, например, так:

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; 
} 

Как он показывает

Однако все столбцы имеют одинаковую ширину, и это вызывает разницу между ними. Как я могу отрегулировать столбцы css, чтобы получить что-то вроде этого, где ширина каждого столбца зависит от содержимого?

То, что я пытаюсь достичь:

Спасибо!

EDIT: я должен отметить, что мне нужно использовать CSS столбцы, поскольку эти список элементов генерируются динамически через CMS, поэтому хотелось бы найти чисто CSS решение, если это возможно, чтобы избежать необходимости вводить Javascript манипулировать DOM. Спасибо.

Answer 1

Для Infos только так как он является экспериментальным только в это время:

это может быть проверено в few browsers,

смотри также http://caniuse.com/#search=grid

обучающего среди других https://css-tricks.com/snippets/css/complete-guide-grid/

So display:grid мог когда-нибудь: Но все же, расположение распыляется строк в строках

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>

---

Если вы используете процедуру на стороне сервера или JavaScript считать ваши детали, то вы может заставлять их распылять колонку на столбе: (пример через js/jQuery: http://codepen.io/gc-nomade/pen/BpZZQW играть и добавлять/удалять 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>