CSS3: grid-template-columns プロパティ - グリッド列の指定

■ 概要

項  目説  明
記述形式 セレクタ {grid-template-columns: }
値 の形式 none | トラック・リスト | subgrid [ グリッド線リスト
初 期 値 none
対応ブラウザー C?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 グリッド・コンテナ
継  承 しない

■ 解説

grid-template-columns プロパティ は,グリッド列 を指定します。

上記のとおり,3種類の記述形式があります。  ただし,トラック・リストグリッド線リスト は,

  • トラック・リスト = [ [ グリッド線名 ] [ トラック・サイズ | repeat( ) ] ]+ [ グリッド線名 ]
  • トラック・サイズ = minmax( トラック幅 , トラック幅 ) | auto | トラック幅
  • トラック幅 = 数値 (長さ,%) | フレックス値 | min-content | max-content
  • グリッド線名 = ID名
  • グリッド線リスト = [ グリッド線名 | repeat( 正の整数, グリッド線名 ) ]+
  • repeat( ) = repeat( 正の整数, [ [ グリッド線名 ] トラック・サイズ ]+ [ グリッド線名 ] )

のような値の1個以上の連結を表します。

これらの値の指定方法は,以下のとおりです。

説  明
数値(長さ) 単位を付けた非負の値を指定します。
数値(% グリッド・トラック列幅を合計したグリッド・コンテナの論理幅に対する百分率(%)で非負の値を指定します。
フレックス値 単位 "fr" を付けた非負の値を指定します。
フレックス値 は対象のトラック列幅を基準とした残りのスペースの比率です。
max-content グリッド・トラック中のコンテナの子要素の最大値を指定します。
min-content グリッド・トラック中のコンテナの子要素の最小値を指定します。
minmax(min, max) min 以上,max 以下の範囲となるように指定します。
max < min の場合は指定値は min になります。
auto minmax(min-content, max-content) を指定したのと同じです。

ちょと,このまま勧告されそうもない複雑な仕様です。

■ 使用例( grid-template-columns プロパティの利用)

現在準備中です。

■ 備考