グリッドレイアウトのトラックの幅を指定して列を定義

トラックの幅を指定して列を定義するには、grid-template-columnsプロパティを使用します。
IEの場合は-ms-grid-columnsプロパティを使用します。

part

構文

							grid-template-columns:幅;
						

指定値

値名	初期値	説明
幅 必須	none	列の横幅。 スペースを区切って値を指定することで横幅を指定する列を増やすことが可能。 例えば3列であれば値は100px auto 1frという風に指定する。 特定のエリアだけに指定することもでき、[エリア名] 値と指定することで可能。

• ※ エリア名は grid-template-areasプロパティによって定義されます。
  詳しくは トラックを名前を付けて定義ページをご覧ください。
• ※ 既にグリッドが割り当てられてセルが作られていた場合で、幅の指定を行わなかった場合、そのセルの幅はグリッドコンテナーの幅に応じて自動的に計算された幅となります。

サンプルコード

次のサンプルコードでは、コンテナーの横幅を360px、列の横幅を左から1個目を50px、2個目を1fr、3個目を2frとしています。

displayプロパティがgrid（あるいはinline-grid）のとき、単位としてfrが使用できますが、このfrという単位はコンテナーの幅と分割する列数に対してどれだけの割合で幅を占めるかを表します（flexのflex-growと同じような役割）。
分割する列のうちfr以外が指定されている列が先に計算され、frが指定されている列が残りの幅に対して計算が行われます。

デモ