CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。
コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的にCSS Gridの使い方を学べます。
CSS Grid Cheat Sheet Illustrated in 2021🎖️
by Joy Shaheb
同じ作者のFlexboxのチートシートも翻訳しました。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
CSS Gridの構造
CSS Gridの知識をリフレッシュしましょう！
2021年に備えて、CSS Gridでできることをチートシートにまとめました🎖️
CSS Gridの構造
CSS Gridの主要な要素は2つ、グリッドコンテナ（親要素）とグリッドアイテム（子要素）です。グリッドコンテナはグリッドのラッパーで、グリッドアイテムはグリッドコンテナに収めるコンテンツです。
コンテンツを二次元にレイアウトするには、グリッドの行と列を定義する必要があります。行は主軸（Main Axis）で、列は交差軸（Cross Axis）で定義します。
※行は横二本線があるから横、列は縦二本線があるから縦と覚えると楽です。
CSS Gridの各プロパティ（親要素）
grid-template-columnsプロパティ
grid-template-columnsプロパティは、行の数と幅を定義するために使用します。各行に個別の幅を定義するか、repeat()関数を使用してすべての行に均一な幅を定義することもできます。
各行に個別の幅を定義
すべての行に均一な幅を定義
grid-template-rowsプロパティ
grid-template-rowsプロパティは、列の数と高さを定義するために使用します。各列に個別の高さを定義するか、repeat()関数を使用してすべての列に均一な高さを定義することもできます。
各列に個別の幅を定義
すべての列に均一な幅を定義
grid-template-areasプロパティ
grid-template-areasプロパティは、グリッドのセルが親コンテナの中に列と行のエリアを保持するために使用されます。このプロパティを使用すると、レイアウトを視覚的に確認できるため、非常に簡単になります。
12×12の各セルのレイアウトを定義
A, B, Cの各アイテムのエリアをどのように保持するかは、下記のように定義します。私は「レイアウトの青写真（テンプレート）」と呼んでいます。
grid-template-areasのコード
column-gapプロパティ
column-gapプロパティは、グリッド内の行に並んだアイテムの間にギャップ（スペース）を配置するために使用します👇
レッドの点線は、グリッドラインと呼ばれています
row-gapプロパティ
row-gapプロパティは、グリッド内の列に並んだアイテムの間にギャップ（スペース）を配置するために使用します👇
レッドの点線は、グリッドライン
justify-itemsプロパティ
justify-itemsプロパティは、主軸（Main Axis）に沿ってアイテムを配置するために使用します。使用できる値は、4つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮
start: 先頭に配置、end: 後尾に配置
center: 中央に配置、stretch: コンテナに収まるように伸縮
align-itemsプロパティ
align-itemsプロパティは、交差軸（Cross Axis）に沿ってアイテムを配置するために使用します。使用できる値は、4つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮
start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮
justify-contentプロパティ
justify-contentプロパティは、主軸（Main Axis）に沿ってグリッドコンテナ内のグリッドを配置するために使用します。使用できる値は、7つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮 - space-between
先頭と後尾は端に残りは等間隔に配置 - space-around
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔 - space-evenly
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮
space-between: 先頭と後尾は端に残りは等間隔に配置、space-around: すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔、space-evenly: すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
align-contentプロパティ
align-contentプロパティは、交差軸（Cross Axis）に沿ってグリッドコンテナ内のグリッドを配置するために使用します。使用できる値は、7つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮 - space-between
先頭と後尾は端に残りは等間隔に配置 - space-around
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔 - space-evenly
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮
space-between: 先頭と後尾は端に残りは等間隔に配置、space-around: すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔、space-evenly: すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
CSS Gridの各プロパティ（子要素）
グリッドのスケール
grid-column: start/end;, grid-row: start/end;
grid-columnとgrid-rowは、複数の行・列を結合するために使用します。
grid-columnとgrid-row
grid-column: start/end;は、grid-column-startとgrid-column-endのショートハンドです。グリッドエリアの行の開始と終了の端を指定します。
同時に、grid-row: start/end;は、grid-row-startとgrid-row-endのショートハンドです。グリッドエリアの列の開始と終了の端を指定します。
grid-areaプロパティ
最初にgrid-template-areasプロパティ☝️を定義する必要があります。完了したら、下記のように子クラス内の親クラスで使用する名前を定義します。
各セルのレイアウトを定義
前述と同様に、grid-template-areasプロパティを定義します。
ggrid-template-areasのコード
次に、grid-areasプロパティで子クラス内の親クラスで使用する名前を定義します。
親クラスで使用する名前を定義
justify-selfプロパティ
justify-selfプロパティは、主軸（Main Axis）に沿ってグリッドコンテナ内に1つのグリッドアイテム（子アイテム）を配置するために使用します。使用できる値は、4つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮
start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮
align-selfプロパティ
align-selfプロパティは、交差軸（Cross Axis）に沿ってグリッドコンテナ内に1つのグリッドアイテム（子アイテム）を配置するために使用します。使用できる値は、4つです。
- start
先頭に配置 - end
後尾に配置 - center
中央に配置 - stretch
コンテナに収まるように伸縮
start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮
CSS Gridのショートハンド
CSS Gridのショートハンドを覚えると、実装の時短になります。
CSS Gridのショートハンド
終わりに
Flexboxのチートシートもあるので、よければご覧ください。
