コーディングクイズ No.14：CSS（CSS Grid）

✅ 正解：B

解説

CSS Gridで要素を適切に配置するには、各行の高さを正しく設定する必要があります。この問題では、画像は固有のサイズ、価格と購入ボタンは最小限のサイズで表示し、タイトル部分で余った空間を埋めることが重要です。

• 選択肢A: `auto auto auto auto`では全ての行が内容に応じたサイズになり、カードの高さが統一されていても中央に余白が生まれてしまいます。
• 選択肢B: `auto 1fr auto auto`が正解です。画像（auto）、タイトル（1fr=余った空間を占有）、価格（auto）、ボタン（auto）の順で配置され、理想的なレイアウトが実現されます。
• 選択肢C: `1fr auto auto auto`では最初の行（画像）が余った空間を占有してしまい、画像が異常に大きくなる可能性があります。
• 選択肢D: `auto auto 1fr auto`では価格部分が余った空間を占有してしまい、価格とボタンの間に不要な空間が生まれます。

実際の開発では、カードレイアウトの統一性が重要です。`1fr`を適切な位置に配置することで、タイトルの長さが異なる商品カードでも、すべて同じ高さで美しく整列させることができます。

.product-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  height: 400px; /* 統一された高さ */
}

.product-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  /* 1frにより、余った空間を占有 */
}

.product-price {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.purchase-btn {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

CSS Gridの`fr`単位を理解し、適切に使用することで、柔軟で保守性の高いレイアウトを作成できます。特にカードレイアウトでは、内容の長さに関わらず一貫した外観を保つことが重要です。