CSS Gridチートシート

基本構造

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

コンテナのプロパティ

grid-template-columns / rows

.grid {
  /* 固定幅 */
  grid-template-columns: 100px 200px 100px;

  /* 比率（fr単位） */
  grid-template-columns: 1fr 2fr 1fr;

  /* 混合 */
  grid-template-columns: 250px 1fr 1fr;

  /* repeat */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(4, 100px);

  /* auto-fill / auto-fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* 行 */
  grid-template-rows: 100px auto 100px;
}

gap（余白）

.grid {
  gap: 20px;           /* 行と列 */
  row-gap: 20px;       /* 行のみ */
  column-gap: 10px;    /* 列のみ */
  gap: 20px 10px;      /* row column */
}

grid-template-areas（名前付きエリア）

.grid {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

justify-items / align-items

.grid {
  /* セル内の水平配置 */
  justify-items: start;   /* 左揃え */
  justify-items: end;     /* 右揃え */
  justify-items: center;  /* 中央 */
  justify-items: stretch; /* 伸縮（デフォルト） */

  /* セル内の垂直配置 */
  align-items: start;
  align-items: end;
  align-items: center;
  align-items: stretch;

  /* 両方まとめて */
  place-items: center;
  place-items: center start;  /* align justify */
}

justify-content / align-content

.grid {
  /* グリッド全体の水平配置 */
  justify-content: start;
  justify-content: end;
  justify-content: center;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;

  /* グリッド全体の垂直配置 */
  align-content: start;
  align-content: end;
  align-content: center;

  /* 両方まとめて */
  place-content: center;
}

grid-auto-flow

.grid {
  grid-auto-flow: row;       /* 行方向に配置（デフォルト） */
  grid-auto-flow: column;    /* 列方向に配置 */
  grid-auto-flow: row dense; /* 隙間を埋める */
}

grid-auto-rows / columns

.grid {
  grid-auto-rows: 200px;        /* 暗黙的な行の高さ */
  grid-auto-rows: minmax(100px, auto);
  grid-auto-columns: 1fr;       /* 暗黙的な列の幅 */
}

アイテムのプロパティ

grid-column / grid-row

.item {
  /* 開始位置 / 終了位置 */
  grid-column: 1 / 3;      /* 1列目から3列目まで（2列分） */
  grid-row: 1 / 2;

  /* span を使用 */
  grid-column: 1 / span 2; /* 1列目から2列分 */
  grid-column: span 2;     /* 2列分（位置は自動） */

  /* 個別指定 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

grid-area

.item {
  /* 名前付きエリア */
  grid-area: header;

  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 2 / 3;
}

justify-self / align-self

.item {
  justify-self: start;   /* 水平方向の個別配置 */
  justify-self: end;
  justify-self: center;
  justify-self: stretch;

  align-self: start;     /* 垂直方向の個別配置 */
  align-self: end;
  align-self: center;
  align-self: stretch;

  /* 両方まとめて */
  place-self: center;
}

よく使うパターン

基本グリッド

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

レスポンシブグリッド

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

聖杯レイアウト

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

ダッシュボード

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 20px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 2;
}

ギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

12カラムシステム

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }

カードリスト

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

中央揃え

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

auto-fill vs auto-fit

/* auto-fill: 空のトラックも作成 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: 空のトラックは0に縮小 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

関連記事

• CSS Flexboxチートシート - Flexbox
• Tailwindチートシート - ユーティリティCSS
• レスポンシブデザイン - 実践