グリッドレイアウトの高さを指定して行を定義 | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website

高さを指定して行を定義するには、grid-template-rowsプロパティを使用します。 構文 grid-template-rows:値[ 値...]; 指定値 値名 初期値 説明 値 必須 ※ 値の前に[エリア名]と指定することで、特定のエリアに対して適用することができます。 エリア名はgrid-template-areasによって定義されます。 ※ 既にグリッドが割り当てられてアイテムが作られていた場合で、高さの指定を行わなかった場合、そのアイテムの高さはグリッドコンテナーの高さに応じて自動的に計算された高さとなります。 サンプルコード 次のサンプルコードでは、コンテナーの高さを360px、行の高さを左から1個目を50px、2個目を1fr、3個目を2frとしています。 なお、通常列は1つになってしまうためgrid-template-columnsを指定して3列にしています。 CSS