CSS grid-row-end 属性

定義と使用方法

grid-row-end 属性は、項目が横跨む行数を指定するか、または項目がどの行線で終了するかを指定します。

ページ末尾の例を参照してください。

参照してください：

CSS タイプ：CSS グリッドレイアウト

例

例 1

"item1" を三行横跨にする：

.item1 {
  grid-row-end: span 3;
}

自分で試してみてください

例 2

横跨む行数の代わりに行線値を使用できます：

.item1 {
  grid-row-end: 3;
}

自分で試してみてください

CSS 言語

grid-row-end: auto|row-line|span n;

属性値

値 説明
auto デフォルト値。項目は一行を横跨む。
span n 項目が横跨む行数を指定します。
column-line どの行から表示を終了するかを指定します。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポート。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module Level 1
JavaScript 言語： object.style.gridRowEnd="4"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44