grid-template-columns

grid-template-columns は CSS のプロパティで、グリッド列のライン名とトラックのサイズ変更機能を定義します。

構文

/* キーワード値 */
grid-template-columns: none;

/* <track-list> 値 */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;

/* <auto-track-list> 値 */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* グローバル値 */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

none
明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは grid-auto-columns プロパティによって決定されます。
<length>
負の値ではない長さで、列の幅を指定します。
<percentage>
グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない <percentage> です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を auto として扱う必要があります。
トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
<flex>
fr の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 <flex> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。

minmax() 表記の外に現れた場合は、最小値が自動として扱われます (つまり minmax(auto, <flex>))。

max-content
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
min-content
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
minmax(min, max)
min 以上、 max 以下の寸法の範囲を定義する関数表記法です。 maxmin より小さい場合、 max は無視され、関数は min として扱われます。最大値として、 <flex> 値はトラックのフレックス係数を設定します。最小値としては無効です。
auto
最大値であれば max-content と同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 (min-width/min-height で指定されたもの) を表します。

注: トラックの寸法が auto の場合 (そして auto の場合だけ)、 align-content およびjustify-content プロパティによって引き伸ばされることがあります。

fit-content( [ <length> | <percentage> ] )
min(max-content, max(auto, argument)) の式を表し、 auto と同様に (すなわち minmax(auto, max-content) と) 計算されますが、トラックの寸法が auto の最小値よりも大きい場合は argument でクランプされるところが異なります。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。
subgrid
subgrid の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

公式定義

初期値none
適用対象grid containers
継承なし
パーセンテージ該当するコンテンツ領域の寸法を参照
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list

形式文法

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

where
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+

where
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

where
<length-percentage> = <length> | <percentage>

グリッド列の寸法の指定

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

結果

仕様書

仕様書 状態 備考
CSS Grid Layout Module Level 2
subgrid の定義
草案 subgrid を追加
CSS Grid Layout
grid-template-columns の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
grid-template-columnsChrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16
完全対応 16
未対応 12 — 79
代替名
代替名 非標準の名前 -ms-grid-rows を使用しています。
Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10
代替名
完全対応 10
代替名
代替名 非標準の名前 -ms-grid-columns を使用しています。
Opera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
Animation of tracksChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 66Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fit-content()Chrome 完全対応 29Edge 完全対応 16Firefox 完全対応 51IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 51Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
minmax()Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
repeat()Chrome 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 部分対応 57
補足
部分対応 57
補足
補足 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
未対応 52 — 57
補足
補足 calc() doesn't work in repeat() (see bug 1350069).
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 38
無効
無効 From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 52
完全対応 52
未対応 40 — 59
無効
無効 From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43
完全対応 43
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
subgridChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 71
完全対応 71
完全対応 69
補足 無効
補足 Enabled by default in Firefox Nightly.
無効 From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報