grid-template-rows プロパティ
grid-template-rows プロパティは、グリッドコンテナの子エレメント(グリッドアイテム)の数と高さを指定する CSS のプロパティです。 縦方向で上から順に、それぞれの高さを指定します。
グリッドアイテムの高さは、指定数分だけの高さをスペースで区切って指定します。指定した数分だけの行方向の高さが設定されます。
.grid_container{
display: grid;
grid-template-rows: 300px auto 250px;
}
横方向の並び数と高さを指定するには、grid-template-columns プロパティを使用します。
grid-templateプロパティでgrid-template-columns、grid-template-rowsを一括して指定することができます。
グリッドコンテナとは display:grid; を設定したエレメントのことです。 この grid-template-rows プロパティは display:grid; を設定したエレメントで機能します。
ページ内 Index
構文(Syntax)
CSS
grid-template-rows: none | auto | max-content | min-content | length | initial | inherit;
DOM ( JavaScript )
String = object.style.gridTemplateRows;
object.style.gridTemplateRows="none | auto | max-content | min-content | length | initial | inherit";
値(Values)
以下の値を行方向に並べたいグリッドアイテム数分だけ定義します。
Value | 摘要 |
---|---|
none | 初期値(default値) |
auto | グリッドアイテムの高さを自動で |
max-content | グリッドアイテムの高さをアイテム内のコンテンツの最大に合わせる |
min-content | グリッドアイテムの高さをアイテム内のコンテンツの最小に合わせる |
length | 行方向のグリッドアイテム数分だけ定義、CSS長さの単位。fit-content() による指定も可 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | none |
継承(Inherited) | No |
CSS Animation | Yes |
Example
grid-template-rows プロパティの例です。 親エレメント<div id="over">に、grid-template-rows プロパティで親エレメント上から高さ100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。
縦横に整列させる例
grid-template-columns と grid-template-rows プロパティを使って縦と横に整列させる方法です。
この例では、6つのグリッドアイテムを横方向に3つ、縦に2つ並べます。
そのために、grid-template-columns で3列、grid-template-rows で2行分を指定します。
幅は均等に分けられるように全て auto で、高さはキレイにみえるように固定値を指定しています。
関連する CSS プロパティ
以下は、grid-template-rows に関連するプロパティです。
display:grid; | 並びを設定することができる display プロパティ |
grid-area | グリッドアイテムに名称を指定 |
grid-auto-columns | グリッドアイテムの幅 |
grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
grid-auto-rows | 全てのグリッドアイテムの高さ |
grid-column | グリッドアイテムの列単位の位置と連結数 |
grid-column-end | 列単位の位置や連結数 |
grid-column-gap | 列同士のギャップ幅 |
grid-column-start | 列単位(横)の位置や連結数 |
grid-gap | グリッドアイテムどうしのギャップのサイズ |
grid-row | 行単位の位置と連結数 |
grid-row-end | 行単位の位置や連結数 |
grid-row-gap | 行同士のギャップ幅 |
grid-row-start | 行単位の位置や連結 |
grid-template | グリッドアイテムの並び数やサイズ |
grid-template-areas | グリッドアイテムの配置や連結 |
grid-template-columns | グリッドアイテムの列の並び数、幅 |
grid-template-rows | グリッドアイテムの行の並び数と高さ |