CSS グリッドレイアウトに関するチートシートです。自分用なので結構雑です。

用語

Grid container

グリッドコンテナ。グリッドレイアウトを敷くもの。

Grid item

グリッドコンテナに包含されるアイテム。

Grid column

レイアウト上の列。

Grid row

レイアウト上の行。

Grid track

グリッドトラック。レイアウト上の縦線と横線のこと。 4x4なレイアウトなら、＋のようなトラックが引かれる。

Grid area

グリッドエリア。任意のグリッドトラックに囲まれた領域。

Grid cell

グリッドセル。グリッドトラックをまたぐこともあるグリッドエリアとは異なり、単一のグリッド領域を指す。

プロパティ

コンテナ系

display

Grid レイアウトを使うために指定してなくてはいけないもの。

.container {
  // ブロックレベルのグリッドコンテナを敷く。
  display: grid; 

  // インラインレベルのグリッドコンテナを敷く。
  display: inline-grid: 
}

grid-template-columns, grid-template-rows

それぞれ、行と列のサイズを指定する。

.container {
  // 1列目が60px, 2列目が80pxになる
  grid-template-columns: 60px 80px; 

  // 1行目が40px, 2行目が4em, 3行目が40pxになる
  grid-template-rows: 40px 4em 40px; 
}

grid-template-area

名称付きグリッドエリアを指定する。

.container {
  // 左上4マスを"a", 中央下1マスを"b", 右下1マスを"c" と指定
  grid-template-areas: 
            "a a ."
            "a a ."
            ". b c";
}

grid 系の他のプロパティから利用可能。

grid-template

grid-template-columns, grid-template-rows, grid-template-areas のショートハンド。

.container {
  grid-template: 
            "a a ." minmax(50px, auto)
            "a a ." 80px
            "b b c" auto / 2em 3em auto;
}

grid-column-gap, grid-row-gap

水平と垂直のグリッドトラックの幅を指定。

.container {
  // 列グリッドトラックの幅を10pxにする
  grid-column-gap: 10px;

  // 行グリッドトラックの幅を10pxにする
  grid-row-gap: 15px;
}

grid-gap

grid-column-gap, grid-row-gap のショートハンド。

.container {
  // グリッドトラックの幅を、列15px, 行10px で指定
  grid-gap: 15px 10px;
}

justify-items

グリッドアイテムの水平方向の寄せ方を指定。

.container {
  // 中央寄せ
  justify-items: center;
  
  // 始点寄せ（始点が左なら左寄せ）
  justify-items: start;

  // 終点寄せ（終点が右なら右寄せ）
  justify-items: end;

  // 他にも色々ある
}

align-items

グリッドアイテムの垂直方向の寄せ方を指定。

.container {
  // 中央寄せ
  align-items: center;
  
  // 始点寄せ（始点が左なら左寄せ）
  align-items: start;

  // 終点寄せ（終点が右なら右寄せ）
  align-items: end;

  // 他にも色々ある
}

place-items

justify-items と align-items のショートハンド。

.container {
  // 垂直方向には中央寄せ、水平方向には終点寄せ
  place-items: center end;

  // 両方中央寄せ
  place-items: center;
}

justify-content

グリッドコンテナ自体を水平方向にどのように寄せるか。

.container {
  // 水平方向に中央寄せ
  justify-content: center: 
}

justify-content, align-content, place-content

それぞれ、justify-items, align-items, place-content のグリッドコンテナ版。

grid-auto-columns, grid-auto-rows

（未完）

grid-auto-flow

位置指定のゆるいグリッドアイテムたちをどのように自動敷き詰めするか指定する。

.container {
  // （グリッドアイテムの順番を保ちつつ）水平方向で敷き詰め
  grid-auto-flow: row;

  // （グリッドアイテムの順番を保ちつつ）垂直方向で敷き詰め
  grid-auto-flow: column;

  // グリッドアイテムの順番を変えてでも敷き詰め
  grid-auto-flow: dense;
}

アイテム系

grid-column-start, grid-column-end, grid-row-start, grid-row-end

グリッドアイテムを、グリッドレイアウト上のどこに置くか指定する。

grid-column, grid-row

それぞれ、(grid-column-start + grid-column-end), (grid-row-start, grid-row-end) のショートハンド。

grid-area

グリッドアイテムに名前を与える。

.a-item {
  grid-area: a; // ".a-item" が4マス分のグリッドエリア "a" を占める
}

また、grid-column-start, grid-column-end, grid-row-start, grid-row-end のショートハンドでもある。

.item {
  grid-area: 1 / col4-start / last-line / 6
}

justify-self

グリッドアイテム自身の水平方向の寄せ方を指定。

.item {
  // 自身をグリッドセル内で中央寄せ
  justify-self: center;
}

align-self

グリッドアイテム自身の垂直方向の寄せ方を指定。

.item {
  // 自身をグリッドセル内で中央寄せ
  align-self: center;
}

place-self

justify-self, align-self のショートハンド。

.item {
  // 自身をグリッドセル内で、垂直方向に中央寄せ、水平方向に終点寄せ
  place-self: center end;
}

コンパイラかく語りき

import { Fun } from 'programming'

自分用 CSS Grid チートシート

用語