CSS 入門

CSS 顕式グリッドと暗黙的グリッド

CSS Grid において、顕式グリッド（Explicit Grid）と暗黙的グリッド（Implicit Grid）の違いを理解することは、コンテンツ量に応じて柔軟に変化するレイアウトをマスターするための鍵となります。

  • 顕式グリッド (Explicit Grid): grid-template-rows や grid-template-columns を使って、あなたが明示的に定義したグリッド構造です。
  • 暗黙的グリッド (Implicit Grid): 定義した範囲を超えてコンテンツが追加されたとき、あるいは定義した範囲外にアイテムを配置したとき、ブラウザがそれらを収めるために自動的に作成する行や列のことです。

1. 顕式グリッド (Explicit Grids) の理解

顕式グリッドは、CSSプロパティを通じて手動で計画されたグリッド構造です。行と列の数、およびそれぞれのサイズを厳密に規定します。

1.1 顕式グリッドの定義

grid-template-rows と grid-template-columns を使用して、グリッド内の行と列のサイズと数を指定します。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3列を定義 */
  grid-template-rows: 100px 200px;    /* 2行を定義 */
}

この例では、「3列×2行」のグリッドを作成しています。

  • 1列目と3列目は 1fr（残りスペースの1配分）。
  • 2列目は 2fr（1列目の2倍のスペース）。
  • 1行目の高さは 100px、2行目は 200px。

1.2 顕式グリッド内でのアイテム配置

grid-column や grid-row を使用して、アイテムをこの設計図通りの位置に配置できます。

.item1 {
  grid-column: 1 / 3; /* 1番目の列線から3番目の列線までまたぐ */
  grid-row: 1;        /* 1行目に配置 */
}

2. 暗黙的グリッド (Implicit Grids) の理解

グリッドアイテムの数が顕式グリッドのセル数を超えた場合、またはアイテムを顕式グリッドの境界外に配置した場合、グリッドコンテナは自動的に暗黙的グリッドを作成します。ブラウザは、溢れたアイテムを収めるために追加の行や列を生成します。

2.1 行と列の自動作成

定義した数以上のアイテムを追加すると、コンテナは自動的に新しい行を作成します。デフォルトでは、これらの暗黙的に作成された行の高さは auto（コンテンツに合わせる）になります。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列を定義 */
  grid-template-rows: 100px;      /* 1行だけを定義 */
}

この場合、アイテム3以降は自動的に作成された行（2行目以降）に配置されます。これらの行の高さはコンテンツに合わせて自動調整されます。

2.2 暗黙的な行と列の制御

grid-auto-rows と grid-auto-columns プロパティを使用すると、自動生成される行や列のサイズをコントロールできます。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px;
  grid-auto-rows: 200px; /* 暗黙的に作成されるすべての行の高さを 200px に固定 */
}

2.3 grid-auto-flow プロパティ

grid-auto-flow プロパティは、自動配置されるアイテムがどのようにグリッドに挿入されるかを制御します。

  • row (デフォルト): アイテムを行ごとに配置。行がいっぱいになると新しい行を作成します。
  • column: アイテムを列ごとに配置。列がいっぱいになると新しい列を作成します。
  • dense: グリッド内の空き穴を埋めるように配置（順序が変わる可能性があります）。
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column; /* アイテムを列方向に埋めていく */
}

3. 実戦ケース

3.1 ケース 1：ダイナミック・ダッシュボード

固定のヘッダーとサイドバーを持ち、メインコンテンツ内のウィジェットが追加・削除に応じて動的に調整されるレイアウトです。

.main-content {
  display: grid;
  /* 200px以上の列を、スペースに合わせて自動で詰め込む */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px; /* ウィジェットの高さを統一（暗黙的グリッドを活用） */
  gap: 10px;
}

3.2 ケース 2：画像ギャラリー

画像の枚数が変化しても、グリッドが動的に適応し、整った見た目を維持します。

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 200px; /* すべての画像を同じ高さに揃える */
  gap: 10px;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* セル内を隙間なく埋める */
}

4. まとめ

顕式グリッドと暗黙的グリッドの相互作用を理解することは、柔軟で堅牢な CSS Grid レイアウトを作成するための基礎です。

  • 顕式グリッドで構造の土台を作り、
  • 暗黙的グリッドで未知のコンテンツ量に対応します。

grid-auto-rows や grid-auto-flow を使いこなすことで、どんなに中身が変化しても崩れない、プロフェッショナルなレスポンシブデザインを実現しましょう。