CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説

.grid {
  display: grid;                          /* グリッドレイアウトを有効化する */
  grid-template-columns: repeat(3, 1fr);  /* 3列・各列が均等幅（frは余白を比率で分割する単位） */
  gap: 12px;                             /* セルどうしの縦横の隙間を12pxに設定 */
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* auto-fill          → 親幅に収まる限り、できるだけ多くの列を並べる */
  /* minmax(200px, 1fr) → 最小幅200px、最大は余白を均等に伸ばす */
  /* → 幅が広ければ多列、狭ければ少列に自動で変わる */
  gap: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;  /* 自動生成される行の高さを120pxに設定 */
  gap: 10px;
}
.big {
  grid-column: span 2;  /* 横方向に2列分の幅を占有する */
  grid-row: span 2;     /* 縦方向に2行分の高さを占有する */
}
.wide {
  grid-column: span 2;  /* 横方向だけ2列分の幅を占有する */
}

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;    /* サイドバー200px固定、メインが残りを占有 */
  grid-template-rows: 60px 1fr 50px;   /* ヘッダー60px、メイン可変、フッター50px */
  min-height: 100vh;                   /* 最低でも画面の高さ全体を確保する */
  grid-template-areas:
    "header  header"   /* 1行目：ヘッダーが2列すべてを占有 */
    "sidebar main"     /* 2行目：左にサイドバー、右にメイン */
    "footer  footer";  /* 3行目：フッターが2列すべてを占有 */
}
header   { grid-area: header;  }  /* "header" エリアに配置する */
.sidebar { grid-area: sidebar; }  /* "sidebar" エリアに配置する */
main     { grid-area: main;    }  /* "main" エリアに配置する */
footer   { grid-area: footer;  }  /* "footer" エリアに配置する */

.layout {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  /* 200px → 左カラムを200pxに固定する */
  /* 1fr   → 中央カラムが残りのスペースをすべて占有して伸縮する */
  /* auto  → 右カラムは内側のコンテンツの幅に合わせて自動調整 */
  gap: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px 1fr 50px;  /* 1行目60px・2行目可変・3行目50px */
  min-height: 100vh;               /* 1fr を機能させるため高さを確保 */
  gap: 8px;
}
header { grid-column: span 3; }  /* ヘッダーは3列すべてにまたがる */
footer { grid-column: span 3; }  /* フッターは3列すべてにまたがる */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  justify-items: center;  /* 水平方向：start / center / end / stretch */
  align-items: center;    /* 垂直方向：start / center / end / stretch */
}
/* 個別セルだけ変えたい場合は justify-self / align-self を使う */
.special {
  justify-self: end;   /* このセルだけ右揃えにする */
  align-self: start;  /* このセルだけ上揃えにする */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4列・均等幅 */
  grid-auto-rows: 120px;                  /* 自動生成される行の高さを120pxに設定 */
  gap: 10px;
}
.feature {
  grid-column: 1 / 3;  /* 列：1番ラインから3番ラインまで（= 2列分の幅） */
  grid-row: 1 / 3;     /* 行：1番ラインから3番ラインまで（= 2行分の高さ） */
}
.wide {
  grid-column: 3 / 5;  /* 列：3番ラインから5番ラインまで（= 2列分の幅） */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;                 /* 基準となる行の高さを150pxに設定 */
  grid-auto-flow: dense;                 /* 大きいセルが空けた隙間に後続セルを自動で詰める */
  gap: 10px;
}
.large {
  grid-column: span 2;  /* 横方向に2列分の幅を占有する */
  grid-row: span 2;     /* 縦方向に2行分の高さを占有する */
}
.tall {
  grid-row: span 2;  /* 縦方向だけ2行分の高さを占有する */
}

/* PC：3列 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列・均等幅 */
  gap: 24px;
}

/* スマホ：1列 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;  /* 1列に変更するだけ */
    gap: 16px;
  }
}

/* @media 不要・自動でレスポンシブ対応 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* auto-fill          → 親幅に収まる限りできるだけ多く列を並べる */
  /* minmax(280px, 1fr) → 最小280px・最大は均等に広げる */
  /* → 幅が狭まると自動で列数が減るため @media が不要 */
  gap: 24px;
}