備忘録的プログラミングリファレンス

grid-column-endプロパティ

 grid-column-endプロパティは、display:grid;が設定されたエレメントの子エレメント(グリッドアイテム)の表示位置を指定する、または連結するプロパティです。
 grid-column-endプロパティは、列(横)方向の表示位置が指定でき、左から何番目かを指定できます。表示されるのは指定位置の一つ前です。

左から2番目に表示
grid-column-end: 3;

 連結方法は、値に"span 連結数"で指定します。

列方向に3マスを連結
grid-column-end: span 3;

 表示位置と連結数の指定値を並べてることはできません。

関連するプロパティ

 以下は関連するプロパティです。

display:grid;並びを設定することができるdisplayプロパティ
grid-areaグリッドアイテムに名称を指定
grid-auto-columnsグリッドアイテムの幅
grid-auto-flowグリッドコンテナの領域を自動的に拡張
grid-auto-rows全てのグリッドアイテムの高さ
grid-columnグリッドアイテムの列単位の位置と連結数
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グリッドアイテムの行の並び数と高さ

構文(Syntax)

CSS

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

DOM(JavaScript)

値の取得
String = object.style.gridColumnEnd;
値の設定
object.style.gridColumnEnd=" auto | line-number | span n ";

値(Values)

Value摘要
auto初期値(default値)
line-number列方向の表示位置(実際の表示は一つ前)
span n列方向への連結数

備考(Remarks)

初期値(Default value)auto
継承(Inherited)No
CSS AnimationYes