CSS grid-column-end 属性

定義と使用方法

grid-column-end属性は、項目が横跨する列数を示しますか、または項目がどの列線（column-line）で終わりますか。

ページの最後に例があります。

参照してください：

CSSチュートリアル：CSSグリッドレイアウト

例

例1

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

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

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

例2

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

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

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

CSS文法

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

属性値

値 説明
auto デフォルト値。項目は一列を横跨します。
span n 項目が横跨する列数を指定します。
column-line 項目の表示を停止する列を指定します。

技術的詳細

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

ブラウザのサポート

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

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