CSS 入門

CSS Grid コンテナとアイテム

CSS Grid を使いこなすための第一歩は、グリッドコンテナ（Grid Container）とグリッドアイテム（Grid Item）の関係を正しく理解することです。これらは、グリッドレイアウトを構成する最小単位であり、これらを操作することで自由自在な配置が可能になります。

1. グリッドコンテナ (The Grid Container)

1.1 グリッドコンテナの作成

CSS Grid を開始するには、まずグリッドコンテナ（Grid Container）を定義する必要があります。これは、すべてのグリッドアイテムを包み込む親要素です。

要素の display プロパティを grid または inline-grid に設定することで、グリッドコンテナを作成できます。

  • display: grid;: 要素をブロックレベルのグリッドコンテナにします。つまり、利用可能な全幅を占有します。
  • display: inline-grid;: 要素をインラインレベルのグリッドコンテナにします。つまり、コンテンツに必要な幅だけを占有します。
.container {
  display: grid; /* または inline-grid */
}

架空の企業「StellarTech」のウェブサイトレイアウトを例に考えてみましょう。メインコンテンツを包む <div class="wrapper"> 要素があるとします。この要素をグリッドコンテナにするには、以下の CSS を追加するだけです。

.wrapper {
  display: grid;
}

これで、.wrapper 要素のすべての直接の子要素が自動的にグリッドアイテム（Grid Items）になります。

1.2 明示的グリッド (Explicit) vs. 暗黙的グリッド (Implicit)

グリッドコンテナを作成した際、コンテンツの構造は「明示的」または「暗黙的」な方法で定義されます。

  • 明示的グリッド (Explicit Grid): grid-template-rows や grid-template-columns プロパティを使用して、行と列を明確に定義した状態を指します（これについては次章で詳説します）。
  • 暗黙的グリッド (Implicit Grid): 行や列を明示的に定義しなかった場合、グリッドアイテムを収めるためにブラウザが必要に応じて自動的に作成する構造です。これらのサイズは、中身のコンテンツによって決定されます。

例えば、3つのアイテムがあり、行や列を定義していない場合、ブラウザはそれらを収めるために「1行3列」の暗黙的グリッドを生成します。

<div class="wrapper">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

.wrapper に display: grid を指定するだけで、アイテムは水平に並ぶ暗黙的グリッド内に配置されます。

1.3 グリッドコンテナの役割

グリッドコンテナは「グリッドレイアウトコンテキスト」を確立する責任を持ちます。つまり、直接の子要素（グリッドアイテム）がどのように配置され、リサイズされるかをコントロールします。コンテナ自体はレイアウトの「枠組み（フレームワーク）」として機能し、直接コンテンツを表示するわけではありません。

また、グリッドアイテム間の余白（gap）や、コンテナ内でのグリッド全体の整列といった、グリッド全体に影響するプロパティもコンテナ側で定義します。

2. グリッドアイテム (Grid Items)

2.1 グリッドアイテムとは？

グリッドアイテム（Grid Items）は、グリッドコンテナの直接の子要素です。

各アイテムはグリッド内の1つ以上の「グリッドセル」を占有します。デフォルトでは、アイテムは自動的に次に利用可能な空のセルに配置され、行ごとに埋められていきます。

先ほどの StellarTech の例では、.wrapper 内部の3つの div 要素がすべてグリッドアイテムとなります。

<div class="wrapper">
  <div>アイテム 1</div> 
  <div>アイテム 2</div> 
  <div>アイテム 3</div> 
</div>

2.2 グリッドアイテムの自動配置

デフォルトでは、グリッドアルゴリズムが自動的にアイテムを空のセルに流し込みます。HTMLのソースコードに出現する順序に従い、左から右へと各行を埋めていきます。配置場所を指定しない限り、グリッドは次の空いているセルを探してアイテムを置きます。

StellarTech の例で、4つ目の div を追加してみましょう。

<div class="wrapper">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
  <div>アイテム 4</div>
</div>

この場合、暗黙的グリッドは「1行4列」になり、各アイテムが1つのセルを占有します。

2.3 グリッドアイテムの順序制御

Flexbox でも登場した order プロパティは、CSS Grid でも使用可能です。これを使えば、HTMLの記述順に関わらず、アイテムの表示順序を視覚的に変更できます。

order プロパティは整数値を受け取り、値が小さいほど先に表示されます。

例えば、StellarTech が「アイテム 3」を最初に表示させたい場合：

<div class="wrapper">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div style="order: -1;">アイテム 3</div>
  <div>アイテム 4</div>
</div>
.wrapper {
  display: grid;
}

この場合、「アイテム 3」の order 値が最小（-1）であるため、最初に表示されます。指定がないアイテムはデフォルトの 0 となり、同じ値の場合はソース順に従います。

       注意点: order はあくまで「視覚的な順序」を変えるだけで、DOM 内のセマンティックな順序は変わりません。これはアクセシビリティ（Accessibility）において重要で、スクリーンリーダーなどは依然として元のソース順で読み上げます。

3. グリッドコンテナのネスト (Nesting)

グリッドアイテムの中に、さらに別のグリッドコンテナをネスト（入れ子）にすることができます。これにより、より複雑で柔軟なレイアウトが可能になります。ネストされたグリッドコンテナは、他のコンテナと同様に、独自のアイテムとレイアウト規則を持ちます。

StellarTech が「アイテム 2」の内部に小さな画像ギャラリーを作りたいとしましょう。この場合、「アイテム 2」自体をグリッドコンテナにします。

<div class="wrapper">
  <div>アイテム 1</div>
  <div class="nested-grid">
    <img src="image1.jpg" alt="画像 1">
    <img src="image2.jpg" alt="画像 2">
  </div>
  <div>アイテム 3</div>
  <div>アイテム 4</div>
</div>
.wrapper {
  display: grid;
}

.nested-grid {
  display: grid; /* ネストされたグリッドコンテナを作成 */
  grid-template-columns: 1fr 1fr; /* ネストされたグリッド内で2列を定義 */
}

この例では、.nested-grid は .wrapper から見れば一つのグリッドアイテムですが、内部の img 要素にとってはグリッドコンテナとして機能しています。これにより、「アイテム 2」の内部で画像を2列に並べる、といった緻密なレイアウトが実現できます。