CSSグリッド行プロパティ
例
「item1」を1行目から開始し、2行にまたがるようにします。
.item1 {
grid-row: 1 / span 2;
}
定義と使用法
このgrid-row
プロパティは、グリッドレイアウトでのグリッドアイテムのサイズと位置を指定し、次のプロパティの省略形のプロパティです。
デフォルト値: | 車/車 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSSグリッドレイアウトモジュールレベル1 |
JavaScript構文: | オブジェクト.style.gridRow = "2 /スパン2" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
grid-row | 57 | 16 | 52 | 10 | 44 |
CSS構文
grid-row: grid-row-start /
grid-row-end;
プロパティ値
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
その他の例
例
スパンする行数の代わりに行行値を使用できます。
.item1 {
grid-row: 1 / 3;
}
関連ページ
CSSチュートリアル:CSSグリッドレイアウト