CSS Gridで2次元レイアウトを組む — grid-template・fr単位・areasの実践ガイド

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列、均等幅 */
  gap: 16px;
}

/* 3列均等 */
grid-template-columns: 1fr 1fr 1fr;
 
/* 左の固定サイドバー + 残りをメイン */
grid-template-columns: 240px 1fr;
 
/* 左:右 = 1:2 の比率 */
grid-template-columns: 1fr 2fr;

/* 固定幅 */
grid-template-columns: 200px 400px 200px;
 
/* repeat() で繰り返し */
grid-template-columns: repeat(3, 1fr); /* 3列均等 */
grid-template-columns: repeat(4, 100px); /* 100px × 4列 */
 
/* minmax() で最小・最大を指定 */
grid-template-columns: repeat(3, minmax(200px, 1fr));
 
/* auto-fill で画面幅に応じて自動的に列数を調整 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

grid-template-rows: 60px 1fr 80px; /* ヘッダー・本文・フッター */

.page {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 60px;
  min-height: 100vh;
}
 
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

/* 列番号で指定 */
.featured {
  grid-column: 1 / 3; /* 1列目のラインから3列目のラインまで（2列分） */
  grid-row: 1 / 2;
}
 
/* span を使う書き方（推奨） */
.wide {
  grid-column: span 2; /* 2列分の幅を占める */
}
 
.tall {
  grid-row: span 3; /* 3行分の高さを占める */
}

.grid {
  display: grid;
  gap: 16px; /* 行・列とも 16px */
  gap: 8px 16px; /* 行方向 列方向 */
  row-gap: 8px; /* 行方向のみ */
  column-gap: 16px; /* 列方向のみ */
}

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

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
 
/* モバイルでは1列に */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
 
.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* ページ全体 → Grid */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
}
 
/* ナビゲーション（Grid内のアイテム）→ Flexbox */
.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}