grid-column プロパティ
grid-column プロパティは、display:grid; によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の列方向の表示位置とサイズを指定することができます。grid-column プロパティはグリッドアイテムに指定します。
grid-column プロパティによって以下のプロパティを一括して指定できます。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
Value | 摘要 |
---|---|
grid-area-names | 領域名を定義 |
grid-column-start | 列(横)方向の表示位置か、列(横)方向への連結数 |
grid-column-end | 列(横)方向の指定位置の1つ前に表示するか、列(横)方向への連結数 |
備考(Remarks)
初期値(Default value) | auto auto |
継承(Inherited) | No |
CSS Animation | Yes |
Example
grid-columnの例です。親エレメントのdisplay:grid;やdisplay-*プロパティによって9つに分割した領域で、contents00のgrid-column:2;によって、contents00がcontents01の次に移動しています。
さらにspan2値によって領域が2つ分確保されていますので、その分がズレています。
最下端部分の3つのアイテムグリッドのHTMLテキストを作成していないために表示されません。
関連するプロパティ
以下は関連するプロパティです。
display:grid; | 並びを設定することができるdisplayプロパティ |
grid-area | グリッドアイテムに名称を指定 |
grid-auto-columns | グリッドアイテムの幅 |
grid-auto-flow | グリッドコンテナの領域を自動的に拡張 |
grid-auto-rows | 全てのグリッドアイテムの高さ |
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 | グリッドアイテムの行の並び数と高さ |