CSSグリッド

グリッド行またはグリッド列のトラックリストを指定します。 [CSS3-Grid] Explicit Track Sizing: the ‘grid-template-rows’ and ‘grid-template-columns’ properties V7.4

値の意味は以下のとおりです。

none

トラックを明示的に作成しません。

<track-list>

一連のトラックサイズ変更関数とグリッド線名のトラックリスト。

<auto-track-list>

一連のトラックサイズ変更関数とグリッド線名のトラックリスト。auto-fill または auto-fit の最初のパラメータ値を持つ repeat() を含みます。

グリッド行またはグリッド列のグリッド線名とトラックサイズ変更関数をスペース区切りのトラックリストとして指定します。

値の意味は以下のとおりです。

<custom-ident>

span または auto ではない CSS 識別子。

グリッド領域の名前を指定します。 [CSS3-Grid] ‘grid-template-areas’

grid item placement プロパティから参照されるグリッド領域の名前を指定します。

グリッドのトラックリストと、グリッド領域の名前指定に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Grid] ‘grid-template’

値の意味は以下のとおりです。

none

三つのプロパティをすべて初期値に設定します。

<'grid-template-rows'> / <'grid-template-columns'>

grid-template-rows、grid-template-columns を設定し、grid-template-areas を none に設定します。

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

grid-template-areas をリストされた文字列に設定し、 grid-template-rows を各文字列に続くトラックサイズに設定します。 grid-template-columns をスラッシュの後に設定されたトラックリストに設定し、指定がない場合は none に設定します。

grid-template-rows または grid-template-columns によってサイズが割り当てられていないトラックのサイズを指定します。 [CSS3-Grid] Implicit Track Sizing: the ‘grid-auto-rows’ and ‘grid-auto-columns’ properties V7.4

グリッドアイテムを自動配置でグリッドに流し込む方法を指定します。 [CSS3-Grid] Implicit Track Sizing: the ‘grid-auto-flow’ and ‘grid-auto-columns’ properties

値の意味は以下のとおりです。

row

アイテムは、各行を順番に埋めていき、必要に応じて新しい行を追加していくことで配置されます。

column

アイテムは、各列を順番に埋めていき、必要に応じて新しい列を追加していくことで配置されます。

dense

グリッドの早い段階で穴を埋めることを試みる「dense」パッキングアルゴリズムの使用を指定します。

グリッドに関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Grid] ‘grid’

このプロパティは、grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow のショートハンドです。グリッド間の間隔を指定する gutter プロパティは設定されません。

グリッドアイテムの行内または列内の開始のグリッド線または終了のグリッド線を指定します。 [CSS3-Grid] Line-based Placement: the ‘grid-row-start’, ‘grid-column-start’, ‘grid-row-end’, and ‘grid-column-end’ properties V7.4

グリッドアイテムの行内の配置に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Grid] ‘grid-row’

このプロパティは、grid-row-start、grid-row-end のショートハンドです。

グリッドアイテムの列内の配置に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Grid] ‘grid-column’

このプロパティは、grid-column-start、grid-column-end のショートハンドです。

グリッドアイテムの配置に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Grid] ‘grid-area’

このプロパティは、grid-row-start、grid-row-end、grid-column-start、grid-column-end のショートハンドです。

コンテナ内のアイテムのデフォルトの位置揃えに関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Align] Content-Distribution Shorthand: the ‘place-content’ property

このプロパティは、align-content、justify-contentのショートハンドです。最初の値は align-content を指定し、2番目の値は justify-content を指定します。 値が ひとつ指定された場合、justify-content は align-content と同じ値に設定されます。

コンテナ内のアイテムのインライン軸に沿った位置揃えを指定します。 [CSS3-Align] Inline-Axis (or Main-Axis) Alignment: the ‘justify-self’ property

値の意味は以下のとおりです。

auto

絶対配置指定のグリッドアイテムの実際の位置を決定するときは、normal として振舞います。 それ以外の場合は、親グリッドコンテナの justify-items 値として振舞います。

normal

stetch (非置換要素の場合に一般的) または start (置換要素の場合に一般的) のいずれかでサイズ調整をします。[CSS3-Grid] Grid Item Sizing を参照してください。

stretch

アイテムの width または height（必要に応じて）が auto で、対応する余白がどちらも auto でない場合は、アイテムのボックスの使用サイズを長さに設定して、 その外側のサイズをグリッドアイテムの領域を満たすサイズにできるだけ近づけます。ただし、min-height/min-width/max-height/max-width を尊重します。

<overflow-position>? <self-position>

アイテムの width または height（必要に応じて）が auto で、対応する余白がどちらも auto でない場合は、アイテムのボックスの使用サイズを長さに設定して、 その外側のサイズをグリッドアイテムの領域を満たすサイズにできるだけ近づけます。ただし、min-height/min-width/max-height/max-width を尊重します。

<overflow-position>

=

safe | unsafe

safe

アイテムがグリッド行からはみ出した場合、アイテムは start 寄せであるかのように配置されます。

unsafe

アイテムがはみ出した場合でも、位置揃えは維持されます。

<self-position>

=

center | start | end | self-start | self-end | flex-start | flex-end

center

アイテムを中央に寄せます。

start

end

アイテムをコンテナの start側または end側に寄せます。

self-start

self-end

アイテムの start側または end側を利用してアイテムを位置揃えします。

flex-start

flex-end

グリッドアイテムには適用されないため、start または end として扱われます。

コンテナ内のアイテムの位置揃えに関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Align] Self-Distribution Shorthand: the ‘place-self’ property

このプロパティは、align-self、justify-self のショートハンドです。最初の値は align-self を指定し、2番目の値は justify-self を指定します。 値が ひとつ指定された場合、justify-self は align-self と同じ値に設定されます。

コンテナ内のすべての子ボックスのデフォルトの justify-self 値を指定します。 [CSS3-Align] Inline-Axis (or Main-Axis) Alignment: the ‘justify-items’ property

値の意味は以下のとおりです。

legacy

値は子孫に確実に継承されます。

これ以外の値は justify-self の値に準じます。

コンテナ内のアイテムの位置揃えに関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Align] Self-Alignment Shorthand: the ‘place-items’ property

このプロパティは、align-items、justify-items のショートハンドです。最初の値は align-items を指定し、2番目の値は justify-items を指定します。 値が ひとつ指定された場合、justify-items は align-items と同じ値に設定されます。

コンテナ内のアイテム間の間隔を指定します。 [CSS3-Align] Row and Column Gutters: the ‘row-gap’ and ‘column-gap’ properties

値の意味は以下のとおりです。

normal

0px.

<length> | <percentage>

グリット行の間隔を指定します。

コンテナ内のアイテム間の行と列の間隔に関連するプロパティをまとめて指定するショートハンドプロパティです。 [CSS3-Align] Gap Shorthand: the ‘gap’ property

このプロパティは、row-gap、column-gap のショートハンドです。最初の値は row-gap を指定し、2番目の値は column-gap を指定します。 値が ひとつ指定された場合、column-gap は row-gap と同じ値に設定されます。

row-gap の従来のショートハンドプロパティです。 [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties

column-gap の従来のショートハンドプロパティです。 [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties

gap の従来のショートハンドプロパティです。 [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties