CSS Grid は 2 つのプロパティだけですべてを設定可能
CSS Grid には 15 個のプロパティがあります。そのうち 8 つがグリッドコンテナに設定するプロパティで、7 つがグリッドアイテムに設定するプロパティです。
しかし、実際にはこれら 15 個のプロパティのうち必須なのはグリッドコンテナに設定する grid とグリッドアイテムに設定する grid-area の 2 つだけです。
なぜそうなるのかという説明の前に、CSS Grid の 15 個のプロパティを見てみましょう。以下がプロパティの一覧です。
グリッドコンテナ用の ８ つのプロパティ：
- grid
- grid-auto-flow
- gird-auto-rows
- grid-auto-columns
- gird-template
- grid-template-areas
- grid-template-rows
- grid-template-columns
グリッドアイテム用の 7 つのプロパティ：
- grid-area
- grid-row
- grid-row-start
- grid-row-end
- grid-column
- grid-column-start
- grid-column-end
お気付きの通り、これらのうちのほとんどのプロパティは grid と grid-area のロングハンド記法に過ぎません。つまり、grid や grid-area の機能を細分化して小分けしたプロパティになります。
grid-template は grid-template-rows と grid-template-columns とのショートハンド（簡略表記法）になります。
そして grid は grid-auto-flow、grid-auto-rows、grid-auto-columns、grid-auto-flow、そして grid-template とのショートハンドになります。
grid-row は grid-row-start と grid-row-end とのショートハンドです。
grid-column は grid-column-start と grid-row-end とのショートハンドです。
そして grid-area は grid-row と grid-column とのショートハンドになります。
grid と grid-area の 2 つのプロパティが他のすべてのグリッドのプロパティの機能を併せ持つため、この 2 つのプロパティだけで CSS Grid のすべてのプロパティを設定可能となっています。
CSS Grid のプロパティは CSS Grid Layout Module Level 1 にて定義されています。
[CSS-GRID-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Grid Layout Module Level 1. 14 December 2017. CR. URL:https://www.w3.org/TR/css-grid-1/
グリッドアイテムの整列や配置に使用する 12 個のプロパティ
最初に CSS Grid には 15 個のプロパティがあると書きました。しかし、CSS Grid では、グリッドアイテムの整列や配置のために以下の 12 個のプロパティも使用します。
グリッドアイテムの整列や配置のための 12 個のプロパティ：
- align-content
- align-items
- align-self
- justify-content
- justify-items
- justify-self
- place-content
- place-items
- place-self
- gap
- row-gap
- column-gap
上記のプロパティは CSS Grid とは別に CSS Box Alignment Module Level 3 で定義されています。
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 21 April 2020. WD. URL: https://www.w3.org/TR/css-align-3/
グリッドアイテムの表示順序を指定する order プロパティ
CSS Grid では、 Flexbox と同様に order プロパティが使用可能です。
任意のグリッドアイテムの order プロパティを指定することで、グリッドアイテムの表示順序を HTML 文書の構造をそのままに変えることができます。
order プロパティは CSS Flexible Box Layout Module にて定義されています。
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. 19 November 2018. CR. URL: https://www.w3.org/TR/css-flexbox-1/
まとめ
CSS Grid で使用するのは、CSS Grid の 15 個のプロパティと、CSS Box Alignment の 12 個のプロパティ、そして CSS Flexible Box Layout の 1 個のプロパティの計 28 個です。
これらのプロパティを活用して CSS Grid で素敵なレイアウトをつくりましょう。
この投稿が何かしらの役に立てれば幸いです。