CSSグリッドレイアウトは、2次元のレイアウトシステムを提供するCSSの機能で、ウェブページやアプリケーションのレイアウトを行うために使用されます。行（rows）と列（columns）を基にしたグリッド構造を定義し、要素を自由に配置することができるため、複雑なレイアウトも効率的に作成できます。

CSSグリッドは、従来のフロートやフレックスボックスよりも直感的かつ柔軟にレイアウトを組めることが特徴です。

基本的な構造

CSSグリッドレイアウトでは、グリッドコンテナとグリッドアイテムの2つの概念があります。

• グリッドコンテナ
  グリッドレイアウトの親要素であり、ここで行と列のサイズを定義します。display: grid;やdisplay: inline-grid;を指定することでグリッドコンテナとなります。
• グリッドアイテム
  グリッドコンテナの直下に配置される子要素で、個別に行や列の位置を設定できます。

グリッドレイアウトの基本的なプロパティ

• display: grid;
  グリッドコンテナを作成するための指定です。
• grid-template-columns
  列（カラム）の数とサイズを指定します。例えば、grid-template-columns: 1fr 2fr;とすると、2列のグリッドが作成され、1列目が1fr、2列目が2frの幅になります。
• grid-template-rows
  行（ロー）の数とサイズを指定します。例えば、grid-template-rows: 100px 200px;とすると、2行のグリッドが作成され、それぞれの行の高さが100pxと200pxに設定されます。
• grid-gap または gap
  グリッドアイテム間のスペースを設定します。例えば、gap: 10px;とすると、行と列の両方に10pxの間隔が空きます。

グリッドレイアウトの例

3列のグリッドを作成し、それぞれの列の幅を均等にする例を紹介します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.item {
  background-color: #3498db;
  padding: 20px;
  color: white;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

このコードでは、.containerがグリッドコンテナとして指定され、3つの等間隔の列が作成されます。gap: 10px;によって各アイテム間に10pxのスペースが設定されます。

グリッドアイテムの配置

グリッドアイテムの位置を指定するために、以下のプロパティを使用します。

• grid-column-start / grid-column-end
  グリッドアイテムがどの列から始まり、どの列まで広がるかを指定します。例えば、grid-column: 1 / 3;とすると、1列目から3列目にわたってアイテムが配置されます。
• grid-row-start / grid-row-end
  グリッドアイテムがどの行から始まり、どの行まで広がるかを指定します。

グリッドアイテムの位置指定例

1つのアイテムを2列分の幅に広げる例です。

.item1 {
  grid-column: 1 / 3;
}

このコードを適用すると、.item1が1列目から2列目にかけて配置されます。

繰り返し指定（repeat関数）

repeat()関数を使うと、指定したサイズを繰り返して簡潔にグリッドを定義できます。

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

このコードは、3列のグリッドで、各列の幅が同じく1frであることを示しています。

自動フィット（auto-fit）と自動フィル（auto-fill）

auto-fitとauto-fillを使うと、コンテナのサイズに応じて要素が自動的に調整されます。

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

この設定では、コンテナの幅が広ければ複数の列が追加され、狭ければ200px幅の列が表示されます。

CSSグリッドのメリット

• 柔軟な2次元レイアウト
  列と行を自由に組み合わせて、複雑なレイアウトを簡単に作成できます。
• レスポンシブ対応が容易
  repeat()やminmax()を使えば、画面サイズに応じたレイアウト調整が可能です。
• 直感的なコード
  グリッドの構造が明確で、コードがシンプルでわかりやすい。

CSSグリッドレイアウトは、複雑なレイアウトを効率的に構築するための強力なツールです。フロートやフレックスボックスと組み合わせて使うことで、さらに洗練されたレイアウト設計が可能になります。