グリッドレイアウトの高さを指定して行を定義

高さを指定して行を定義するには、grid-template-rowsプロパティを使用します。

構文

							grid-template-rows:値[ 値...];
						

指定値

値名	初期値	説明
値 必須	none	行の高さ。スペースを区切って値を指定することで高さを指定する行を増やすことが可能。

• ※ 値の前に[エリア名]と指定することで、特定のエリアに対して適用することができます。
  エリア名はgrid-template-areasによって定義されます。
• ※ 既にグリッドが割り当てられてアイテムが作られていた場合で、高さの指定を行わなかった場合、そのアイテムの高さはグリッドコンテナーの高さに応じて自動的に計算された高さとなります。

サンプルコード

次のサンプルコードでは、コンテナーの高さを360px、行の高さを左から1個目を50px、2個目を1fr、3個目を2frとしています。
なお、通常列は1つになってしまうためgrid-template-columnsを指定して3列にしています。

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

デモ