Gridで作るカラムレイアウト

CSS Gridは、行と列を同時に制御できる強力なレイアウトシステムです。

基本構文

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1.5rem;
}

レスポンシブなカードグリッド

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

名前付きエリア

.page-layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

Gridを使えば、複雑なレイアウトも宣言的に記述できます。