CSS Subgridで複雑なレイアウトをシンプルに実装する方法【2025年版】

/* 従来の方法：子グリッドで親と同じ定義を再記述 */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 重複した定義 */
}

/* Subgridを使用：親のトラック定義を継承 */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* 親の定義を継承 */
  grid-column: 1 / -1; /* 親の全幅を使用 */
}

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

.subgrid-item {
  display: grid;
  grid-column: 1 / -1; /* 親の全列を使用 */
  grid-template-columns: subgrid; /* 列定義を継承 */
  gap: 10px; /* 子グリッドの独自のgap設定も可能 */
}

/* 列のみ継承 */
.subgrid-columns {
  grid-template-columns: subgrid;
  grid-template-rows: auto auto; /* 独自の行定義 */
}

/* 行のみ継承 */
.subgrid-rows {
  grid-template-columns: 1fr 2fr; /* 独自の列定義 */
  grid-template-rows: subgrid;
}

/* 両方継承 */
.subgrid-both {
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.parent {
  grid-template-columns:
    [start] 1fr [middle] 2fr [end];
}

.child {
  grid-template-columns:
    subgrid [sub-start] [sub-middle] [sub-end];
}

<div class="card-container">
  <div class="card">
    <img src="image1.jpg" alt="商品1" class="card-image">
    <h3 class="card-title">短いタイトル</h3>
    <p class="card-description">説明文です。</p>
    <button class="card-button">詳細を見る</button>
  </div>
  <div class="card">
    <img src="image2.jpg" alt="商品2" class="card-image">
    <h3 class="card-title">とても長いタイトルのテキスト例</h3>
    <p class="card-description">長い説明文のサンプルテキストです。複数行にわたる内容を含んでいます。</p>
    <button class="card-button">詳細を見る</button>
  </div>
  <div class="card">
    <img src="image3.jpg" alt="商品3" class="card-image">
    <h3 class="card-title">中程度のタイトル</h3>
    <p class="card-description">普通の長さの説明文です。</p>
    <button class="card-button">詳細を見る</button>
  </div>
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(4, auto); /* 画像、タイトル、説明、ボタン */
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* 行の高さを継承 */
  grid-row: span 4; /* 親グリッドの4行を使用 */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  gap: 16px;
  padding: 16px;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.card-description {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.card-button {
  margin-top: auto; /* ボタンを下端に配置 */
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

<form class="form-container">
  <div class="form-group">
    <label for="name">お名前</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">メールアドレス</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="phone">電話番号</label>
    <input type="tel" id="phone" name="phone">
  </div>
  <button type="submit" class="submit-button">送信</button>
</form>

.form-container {
  display: grid;
  grid-template-columns: auto 1fr; /* ラベル幅auto、入力欄1fr */
  gap: 24px 16px; /* 行間24px、列間16px */
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  display: grid;
  grid-template-columns: subgrid; /* 親の2列構造を継承 */
  grid-column: 1 / -1; /* 親の全幅を使用 */
  align-items: center;
}

.form-group label {
  font-weight: bold;
  text-align: right;
}

.form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-button {
  grid-column: 1 / -1; /* 全幅に配置 */
  padding: 12px 24px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 16px;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .form-container {
    grid-template-columns: 1fr; /* スマホでは1列レイアウト */
  }

  .form-group {
    grid-template-columns: subgrid;
    gap: 8px;
  }

  .form-group label {
    text-align: left; /* 左揃えに変更 */
  }
}

/* ❌ 間違った例：親のライン番号を直接参照 */
.subgrid-item {
  grid-column: 3 / 5; /* 親グリッドの3-5番線のつもり */
}

/* ✅ 正しい例：Subgrid内のライン番号を使用 */
.subgrid-item {
  grid-column: 1 / 3; /* Subgrid内の1-3番線 */
}