CSS アドバンス

CSS Grid 12カラムグリッド

多くの Web デザイナーは 12 カラムグリッドシステムを採用しています。12 という数値は 2, 3, 4, 6 で割り切れるため、レイアウトの柔軟性が非常に高いからです。

1. 12カラムグリッドの作成

CSS Grid を使用して 12 カラムのグリッドを作成するには、まず親要素（コンテナ）を定義し、その display プロパティを grid に設定します。次に、grid-template-columns プロパティを使用して、同じ幅を持つ 12 個のカラムを定義します。

.grid-container {
  display: grid;
  /* 1fr（1フラクション）を12回繰り返して、同じ幅の12カラムを作成 */
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

2. カラムをまたぐ配置 (Span)

グリッドアイテムを配置する際は、grid-column プロパティを使用して、そのアイテムがいくつのカラムを占有するかを指定します。

2.1 実装例

以下のコードは、ヘッダー、メニュー、メインコンテンツ、右サイドバー、およびフッターで構成される典型的な 12 カラムレイアウトの例です。

/* ヘッダー：12カラムすべてを占有 */
.item1 {
  grid-column: span 12;
}

/* メニュー：3カラム分を占有 */
.item2 {
  grid-column: span 3;
}

/* メインコンテンツ：6カラム分を占有 */
.item3 {
  grid-column: span 6;
}

/* 右サイドバー：3カラム分を占有 */
.item4 {
  grid-column: span 3;
}

/* フッター：12カラムすべてを占有 */
.item5 {
  grid-column: span 12;
}

3. 完全な Web ページのレイアウト例

これらのプロパティを組み合わせることで、構造化された Web ページを構築できます。

3.1 HTML 構造

<div class="grid-container">
  <div class="item1">ヘッダー</div>
  <div class="item2">メニュー</div>
  <div class="item3">メイン</div>
  <div class="item4">右サイドバー</div>
  <div class="item5">フッター</div>
</div>

3.2 CSS スタイリング

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  /* カラムの幅を指定（12カラム分） */
  grid-template-columns: repeat(12, 1fr);
  /* 視覚的にエリアを定義 */
  grid-template-areas:
    'header header header header header header header header header header header header'
    'menu menu menu main main main main main main right right right'
    'footer footer footer footer footer footer footer footer footer footer footer footer';
  gap: 10px;
}

4. レスポンシブへの応用

12 カラムグリッドの真価は、メディアクエリ（Media Queries）と組み合わせたときに発揮されます。画面サイズに応じて、アイテムが占有するスパン数を変更することで、デバイスに最適な表示を実現できます。

/* デフォルト（モバイル）：すべてのアイテムを全幅表示 */
.grid-item {
  grid-column: span 12;
}

/* タブレット・デスクトップ（600px以上） */
@media only screen and (min-width: 600px) {
  .menu { grid-column: span 3; }
  .main { grid-column: span 9; }
}

12 カラムグリッドシステムを CSS Grid で実装することは、従来のフレームワークを使用するよりもコードが軽量になり、かつ柔軟なカスタマイズを可能にします。グリッドラインの番号や span キーワードを使い分けることで、より複雑な 2 次元レイアウトにも対応できるでしょう。