CSS Gridレイアウトの基本と応用

CSS Gridは、Webページのレイアウトを効率的に構築できる強力なレイアウトシステムです。
このガイドでは、初心者向けに基本から応用までわかりやすく解説していきます。

CSS Gridとは？

CSS Gridは、2次元のレイアウトシステムで、行（rows）と列（columns）を組み合わせて要素を配置できます。 従来の「float」や「flexbox」では難しかった複雑なレイアウトも、簡単に実現できます。

特徴

• 2次元レイアウトの構築が簡単（縦・横の両方に対応）。
• レスポンシブデザインを簡単に作成できる。
• 親要素と子要素でのレイアウト制御が明確。

基本的な使い方

Grid Container の設定

まず、display: grid; を指定することで要素がGrid Containerになります。

.container {
  display: grid;
}

行と列の定義 (grid-template-columns / grid-template-rows)

grid-template-columns は列の幅を、grid-template-rows は行の高さを指定します。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

上記の場合、3列 × 2行 のグリッドが作成されます。

自動でサイズ調整 (auto)

.container {
  display: grid;
  grid-template-columns: 200px auto 200px;
}

中央の列は空きスペースに応じて自動で調整されます。

繰り返し記法 (repeat())

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

この例は、同じ幅の列を3つ作成します。1fr は残りの空間を等分する単位です。

グリッドアイテムの配置

アイテムの配置方法

子要素（Grid Item）は自動で配置されますが、指定して配置することも可能です。

.item1 {
  grid-column: 1 / 3; /* 列を1から3までの範囲で占有 */
  grid-row: 1 / 2;   /* 行を1から2までの範囲で占有 */
}

grid-area プロパティ

.item1 {
  grid-area: 2 / 1 / 3 / 4; /* 行開始 / 列開始 / 行終了 / 列終了 */
}

応用テクニック

レスポンシブグリッドレイアウト

メディアクエリを使ってレスポンシブ対応を実現。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

名前付きグリッドエリア

指定した名前でエリアを定義できます。

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

まとめ

CSS Gridは、レイアウトを簡単かつ柔軟に構築できる強力なツールです。基本を理解することで、自由なレイアウト作成が可能になります。