2021年版、CSS Gridでどのように配置されるかをまとめたチートシート

CSS Gridでよく使用するプロパティと値をまとめたチートシートを紹介します。
コンテナ内にアイテムがどのように配置されるかを図やイラストで掲載しており、楽しく直感的に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の構造

CSS Gridの主要な要素は2つ、グリッドコンテナ(親要素)とグリッドアイテム(子要素)です。グリッドコンテナはグリッドのラッパーで、グリッドアイテムはグリッドコンテナに収めるコンテンツです。

コンテンツを二次元にレイアウトするには、グリッドの行と列を定義する必要があります。行は主軸(Main Axis)で、列は交差軸(Cross Axis)で定義します。
※行は横二本線があるから横、列は縦二本線があるから縦と覚えると楽です。

CSS Gridの各プロパティ(親要素)

grid-template-columnsプロパティ

grid-template-columnsプロパティは、行の数と幅を定義するために使用します。各行に個別の幅を定義するか、repeat()関数を使用してすべての行に均一な幅を定義することもできます。

grid-template-columnsプロパティの使用例

各行に個別の幅を定義

grid-template-columnsプロパティの使用例

すべての行に均一な幅を定義

grid-template-rowsプロパティ

grid-template-rowsプロパティは、列の数と高さを定義するために使用します。各列に個別の高さを定義するか、repeat()関数を使用してすべての列に均一な高さを定義することもできます。

grid-template-rowsの使用例

各列に個別の幅を定義

grid-template-rowsのキャプチャ

すべての列に均一な幅を定義

grid-template-areasプロパティ

grid-template-areasプロパティは、グリッドのセルが親コンテナの中に列と行のエリアを保持するために使用されます。このプロパティを使用すると、レイアウトを視覚的に確認できるため、非常に簡単になります。

12x12のグリッドのセル

12x12の各セルのレイアウトを定義

A, B, Cの各アイテムのエリアをどのように保持するかは、下記のように定義します。私は「レイアウトの青写真(テンプレート)」と呼んでいます。

grid-template-areasのコード

grid-template-areasのコード

column-gapプロパティ

column-gapプロパティは、グリッド内の行に並んだアイテムの間にギャップ(スペース)を配置するために使用します👇

column-gapプロパティの使用例

レッドの点線は、グリッドラインと呼ばれています

row-gapプロパティ

row-gapプロパティは、グリッド内の列に並んだアイテムの間にギャップ(スペース)を配置するために使用します👇

row-gapプロパティの使用例

レッドの点線は、グリッドライン

justify-itemsプロパティ

justify-itemsプロパティは、主軸(Main Axis)に沿ってアイテムを配置するために使用します。使用できる値は、4つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
justify-itemsプロパティの使用例

start: 先頭に配置、end: 後尾に配置

justify-itemsプロパティの使用例

center: 中央に配置、stretch: コンテナに収まるように伸縮

align-itemsプロパティ

align-itemsプロパティは、交差軸(Cross Axis)に沿ってアイテムを配置するために使用します。使用できる値は、4つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
align-itemsプロパティの使用例

start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮

justify-contentプロパティ

justify-contentプロパティは、主軸(Main Axis)に沿ってグリッドコンテナ内のグリッドを配置するために使用します。使用できる値は、7つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
  • space-between
    先頭と後尾は端に残りは等間隔に配置
  • space-around
    すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
  • space-evenly
    すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
justify-contentプロパティの使用例

start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮

justify-contentプロパティの使用例

space-between: 先頭と後尾は端に残りは等間隔に配置、space-around: すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔、space-evenly: すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔

align-contentプロパティ

align-contentプロパティは、交差軸(Cross Axis)に沿ってグリッドコンテナ内のグリッドを配置するために使用します。使用できる値は、7つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
  • space-between
    先頭と後尾は端に残りは等間隔に配置
  • space-around
    すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
  • space-evenly
    すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
align-contentプロパティの使用例

start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮

align-contentプロパティの使用例

space-between: 先頭と後尾は端に残りは等間隔に配置、space-around: すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔、space-evenly: すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔

CSS Gridの各プロパティ(子要素)

グリッドのスケール

グリッドのスケール

grid-column: start/end;, grid-row: start/end;

grid-columngrid-rowは、複数の行・列を結合するために使用します。

grid-columnとgrid-rowの使用例

grid-columngrid-row

grid-column: start/end;は、grid-column-startgrid-column-endのショートハンドです。グリッドエリアの行の開始と終了の端を指定します。

同時に、grid-row: start/end;は、grid-row-startgrid-row-endのショートハンドです。グリッドエリアの列の開始と終了の端を指定します。

grid-areaプロパティ

最初にgrid-template-areasプロパティ☝️を定義する必要があります。完了したら、下記のように子クラス内の親クラスで使用する名前を定義します。

最初に、各セルのレイアウトを定義

各セルのレイアウトを定義

前述と同様に、grid-template-areasプロパティを定義します。

grid-template-areasプロパティの使用例

ggrid-template-areasのコード

次に、grid-areasプロパティで子クラス内の親クラスで使用する名前を定義します。

grid-areaプロパティの使用例

親クラスで使用する名前を定義

justify-selfプロパティ

justify-selfプロパティは、主軸(Main Axis)に沿ってグリッドコンテナ内に1つのグリッドアイテム(子アイテム)を配置するために使用します。使用できる値は、4つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
justify-selfプロパティの使用例

start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮

align-selfプロパティ

align-selfプロパティは、交差軸(Cross Axis)に沿ってグリッドコンテナ内に1つのグリッドアイテム(子アイテム)を配置するために使用します。使用できる値は、4つです。

  • start
    先頭に配置
  • end
    後尾に配置
  • center
    中央に配置
  • stretch
    コンテナに収まるように伸縮
align-selfプロパティの使用例

start: 先頭に配置、end: 後尾に配置、center: 中央に配置、stretch: コンテナに収まるように伸縮

CSS Gridのショートハンド

ショートハンドを覚えておくと、便利

CSS Gridのショートハンドを覚えると、実装の時短になります。

CSS Gridのショートハンド

CSS Gridのショートハンド

終わりに

Flexboxのチートシートもあるので、よければご覧ください。

2021年版、Flexboxでよく使用するプロパティと値をまとめたチートシート

2021年版、Flexboxでどのように配置されるかをまとめたチートシート

sponsors

top of page

©2021 coliss