CSS Grid レイアウト実用チートシート

このページでは、グリッドコンテナとグリッド項目のコア属性、および実用的なレイアウト例を含む CSS Grid レイアウトの視覚的なチートシートを提供します。

グリッドコンテナ (Grid Container)

属性	値	説明
`display`	`grid`	要素をグリッドコンテナとして定義する
`grid-template-columns`	`100px 1fr`	列（カラム）の幅を定義する
`grid-template-rows`	`100px 1fr`	行（ロウ）の高さを定義する
`grid-template-areas`	`header header` `sidebar main` `footer footer`	エリアに名前を付けてグリッドを定義する
`grid-column-gap`	`10px`	列間のギャップ（隙間）を定義する
`grid-row-gap`	`10px`	行間のギャップ（隙間）を定義する
`grid-gap`	`10px 20px`	行間と列間のギャップを同時に定義する
`justify-items`	`start`	グリッドアイテムのセル内での水平方向の揃え
`align-items`	`start`	グリッドアイテムのセル内での垂直方向の揃え
`justify-content`	`start`	グリッド全体のコンテナ内での水平方向の揃え
`align-content`	`start`	グリッド全体のコンテナ内での垂直方向の揃え

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container {
  display: grid;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
}