cssカラムを使用してカラム幅をコンテンツサイズに調整するにはどうすればよいですか？

Question

私はそうのように、3列にまたがるリストを作成するために、CSSの列（ないテーブル）を使用しています：

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：私はアイテムのこれらのリストには、CMSによって動的に生成されているので、私はCSS列を使用する必要があることを言及する必要があり、その操作するためのJavascriptを導入することを避けるために、可能な場合、純粋なCSSの解決策を見つけるしたいと思いますDOM。ありがとうございました。それだけ以来に関する情報については

Answer 1

は、この時点で唯一の実験である：

が、中でもhttp://caniuse.com/#search=grid

チュートリアルも参照、これはfew browsersで試験することができる

https://css-tricks.com/snippets/css/complete-guide-grid/

So display:gridは、いつの日か助けることができる：しかし、あなたはあなたのアイテムをカウントするために、サーバー側またはJavaScript上のルーチンを使用している場合は、まだ、レイアウトはあなたがして、行

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>

---

ごとの行を噴霧し、 （例：js/jQuery：http://codepen.io/gc-nomade/pen/BpZZQWの再生と追加/削除）

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>