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 で素敵なレイアウトをつくりましょう。
この投稿が何かしらの役に立てれば幸いです。
