CSS Gridレイアウトガイド：UIデザインのための実践的グリッドシステム

CSS Gridは2次元のレイアウトシステムで、複雑なUIレイアウトをシンプルなCSSで実現できます。Bootstrapのようなフレームワークに依存せず、デザインの意図を正確に実装できるため、現代のフロントエンド開発で欠かせない技術です。本記事では、UIデザイナーとエンジニアに向けた実践的なCSS Gridの使い方を解説します。

CSS Gridの基本概念

グリッドコンテナとグリッドアイテム：

display: grid を設定した要素がグリッドコンテナになり、その直接の子要素がグリッドアイテムになります。

グリッドトラック（行と列）：

grid-template-columns と grid-template-rows でグリッドの列・行のサイズを定義します。

フラクション単位（fr）：

fr は利用可能なスペースの割合を表す単位です。grid-template-columns: 1fr 2fr 1fr は左右が等しく、真ん中が2倍の幅になります。

ギャップ（gap）：

gap: 24px でグリッドアイテム間の余白を設定します。column-gap と row-gap を個別に設定することもできます。

12カラムグリッドシステム

UIデザインの標準的な12カラムグリッドはCSS Gridで簡潔に実装できます：

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

auto-fill と auto-fit

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

特定のブレークポイントを書かずに、カラム数が自動的に変化するグリッドを作れます：

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

auto-fill: 空のグリッドトラックを残してコンテナを埋める

auto-fit: 空のトラックを折りたたんで既存アイテムを伸ばす

商品一覧・ブログ記事一覧など、可変数のカードを並べるUIで非常に有用です。

Named Grid Areas（グリッドエリア名）

ページレイアウトをセマンティックに定義できます：

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

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

これにより、レイアウトの変更がCSSのtemplate-areasの変更のみで済み、HTML構造を変えずにレイアウトを調整できます。

サブグリッド（Subgrid）

CSS Gridのサブグリッド機能（grid-template-columns: subgrid）により、親グリッドのトラックに子要素のグリッドを揃えることができます。カードコンポーネント内の要素を親グリッドのラインに沿って配置する場合などに有効で、複雑なUIの整合性を保ちやすくなります。

グリッドとFlexboxの使い分け

CSS Gridが得意なもの：

• 2次元のレイアウト（行と列の両方を制御）
• ページ全体のレイアウト（ヘッダー・サイドバー・メイン・フッター）
• カードグリッド・ギャラリー

Flexboxが得意なもの：

• 1次元のレイアウト（行または列のどちらか）
• ナビゲーションバーの水平配置
• ボタン内のアイコンとテキストの垂直中央揃え
• コンポーネント内の要素配置

両者を組み合わせることが現代のUIレイアウトの標準です。グリッドでページ・セクションのマクロレイアウトを組み、Flexboxでコンポーネント内のミクロレイアウトを組むアプローチが効果的です。

レスポンシブグリッドの設計

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* モバイル: 1列 */
  gap: 16px;
}

@media (min-width: 640px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレット: 2列 */
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr); /* デスクトップ: 3列 */
    gap: 24px;
  }
}

まとめ

CSS GridはUIのレイアウトを直感的かつ柔軟に実現できる強力なツールです。12カラムグリッド・auto-fill・named areas・サブグリッドを使いこなすことで、デザインの意図を正確に実装できるレイアウトが完成します。UI ZUKANでは様々なグリッドレイアウトの実装例を掲載しています。