grid-column-end プロパティ
grid-column-end プロパティは、display:grid;が設定されたエレメントの子エレメント（グリッドアイテム）の表示位置を指定する、または連結するプロパティです。
grid-column-end プロパティは、列（横）方向の表示位置が指定でき、左から何番目かを指定できます。表示されるのは指定位置の一つ前です。
grid-column-end: 3;
連結方法は、値に"span 連結数"で指定します。
grid-column-end: span 3;
表示位置と連結数の指定値を並べてることはできません。
grid-column-start、grid-column-end を一括指定するには grid-column プロパティを指定します。
ページ内 Index
構文(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 Animation | Yes |
Example
grid-column-end の例です。親エレメントのdisplay:grid;やdisplay-*プロパティによって9つに分割した領域で、contents00のgrid-column-end:2;によって、contents00がcontents01の次に移動しています。
最下端部分の３つのアイテムグリッドのHTMLテキストを作成していないために表示されません。
関連するプロパティ
以下は関連するプロパティです。
| 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 | グリッドアイテムの行の並び数と高さ |