最も幅の広い要素の幅は、行内のすべての兄弟の幅を設定します

Question

CSSのフレックスボックスとCSSグリッドに関するチュートリアルはたくさん読んでいますが、このシンプルな（？）のことを率直に説明することはできません。

私が望むのは、コンテナ内の要素すべてが、最も広い要素と同じ幅であることです。

私はそれらがコンテナの全幅を埋めることを望んでいません。ちょうどすべて最大幅まで成長します。それはCSSでできますか？

このHTML考えてみましょう：

<div class="container"> 
    <button>a normal button</button> 
    <button>tiny</button> 
    <button>a really, really, really wide button</button> 
</div> 

このような何かを生成すること：私が欲しいもの

は、彼らがその最も広いボタンのすべての幅だ、このようなものです：

が、これは行うことができます：私は彼らがちょうどページの幅を埋めるために伸ばしにしたくないですか？もしそうなら、上記のHTMLのCSSは何でしょうか？

Answer 1

はい。これは、純粋なCSSで行うことができます。

.container { 
 
    display: inline-grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
}

<div class="container"> 
 
    <button>a normal button</button> 
 
    <button>tiny</button> 
 
    <button>a really, really, really wide button</button> 
 
</div>

ここでそれが動作する方法は次のとおり：

は、簡単な解決策だ

グリッドレイアウトグリッド容器にフレキシブルな長さを確立するための手段を提供します。これはfrユニットです。コンテナ内の空き領域を分散するように設計されています（flex-growと多少似ています）。

ただし、Grid仕様では、コンテナの幅/高さが動的な場合（たとえば、display: inline-grid）、特にユニークな動作が提供されます。

この場合、frユニットは、各グリッド項目のmax-contentを計算します。それは、それが見つけた最大値をとり、トラック上のすべての項目の長さを1frとして使用します。

この結果、行内の最も幅の広いアイテムの幅を共有するグリッドアイテムになります。

奇妙ですが、本当です。

レイアウトがequal height rows is possible with Grid (but not flexbox)の理由もあります。空き容量が無限である場合には

7.2.3. Flexible Lengths: the fr unit

グリッド コンテナの幅または高さがあるとき、たまたま（...

：

ここで仕様の関連するセクションです（fr）グリッドトラックは、それぞれの比率を保持しながら内容に合わせてサイズが変更されています（ ）。各フレックスサイズのグリッドのトラックの

使用されるサイズは、各フレックスサイズ格子トラックの max-contentサイズを決定し、各フレックス倍 サイズが「仮説1fr サイズ」を決定することを割ることによって計算されます。

それらの最大値は、その最終的なサイズを決定するために、各グリッドのトラックのフレックス 係数を乗じて解決1fr長（ フレックス分数）として使用されます。ここで

Answer 2

ボタンの任意の数の作業CSSグリッドを使用したソリューションです。

div.container 
{ 
    display: inline-grid; 
    grid-auto-columns: 1fr; 
} 
div.container button 
{ 
    grid-row: 1; 
}