grid-auto-columns
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
grid-auto-columns は CSS のプロパティで、暗黙的に生成されたグリッドの列トラックまたはトラックのパターンの大きさを指定します。
試してみましょう
grid-auto-columns: auto;
grid-auto-columns: 1fr;
grid-auto-columns: min-content;
grid-auto-columns: minmax(10px, auto);
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div></div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-auto-rows: 40px;
grid-gap: 10px;
width: 220px;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
}
#example-element > div:nth-child(1) {
grid-column: 1 / 3;
}
#example-element > div:nth-child(2) {
grid-column: 2;
}
グリッドアイテムが grid-template-columns で明示的に大きさが指定されていない列に配置された場合、暗黙的に grid トラックが作成され、そのアイテムを保持します。これには、範囲外の列に明示的に配置する場合と、自動配置アルゴリズムによって追加の列が作成される場合があります。
構文
/* キーワード値 */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;
/* <length> 値 */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;
/* <percentage> 値 */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;
/* <flex> 値 */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;
/* minmax() 値 */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);
/* fit-content() 値 */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);
/* multiple track-size 値 */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
/* グローバル値 */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;
値
<length>-
負の値ではない長さです。
<percentage>-
グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない
<percentage>です。グリッドコンテナーのインライン方向の寸法が不定の場合は、パーセント値はautoのように扱われます。 <flex>-
frの単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。<flex>の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。minmax()表記の外に現れた場合は、最小値が自動として扱われます (つまりminmax(auto, <flex>))。 max-content-
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
min-content-
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
minmax(min, max)-
min 以上、max 以下の寸法の範囲を定義する関数記法です。 max が min より小さい場合は、 max は無視され、 min として扱われます。
<flex>の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。 fit-content( [ <length> | <percentage> ] )-
min(max-content, max(auto, argument))という式を表します。この式は、トラックの寸法がautoの最小値よりも大きい場合に argument で固定されることを除いて、autoと同様 (すなわちminmax(auto, max-content)) に計算されます。 auto-
最大値としては、そのトラック内のアイテムの最大の
max-contentのサイズを表します。最小値としては、そのトラック内のアイテムの最大の最小サイズ（アイテムの
min-width/min-heightで指定します）を表します。これは常にではありませんが、min-contentのサイズであることが多いです。minmax()表記の外で使用した場合、autoは上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、minmax(min-content,max-content)と同様の動作をします。メモ: トラックの寸法が
autoの場合は、align-contentとjustify-contentのプロパティによって引き伸ばすことができます。従って既定では、autoサイズのトラックはグリッドコンテナーの残りの空間を占めます。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | 計算値の型による |
形式文法
grid-auto-columns =
<track-size>+
<track-size> =
<track-breadth> |
minmax( <inflexible-breadth> , <track-breadth> ) |
fit-content( <length-percentage [0,∞]> )
<track-breadth> =
<length-percentage [0,∞]> |
<flex [0,∞]> |
min-content |
max-content |
auto
<inflexible-breadth> =
<length-percentage [0,∞]> |
min-content |
max-content |
auto
<length-percentage> =
<length> |
<percentage>
例
グリッド列の寸法を設定
HTML
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
CSS
#grid {
height: 100px;
display: grid;
grid-template-areas: "a a";
gap: 10px;
grid-auto-columns: 200px;
}
#grid > div {
background-color: lime;
}