CSS Gridの基本

Flexboxで色々なレイアウトができるようになりました！でも、もっと複雑なグリッド状のレイアウトを作りたいときはどうすればいいんですか？

そんな時こそ、CSS Gridの出番だよ。Flexboxが一次元のレイアウトに最適なのに対して、CSS Gridは二次元のレイアウト、つまり行と列を同時に制御できる強力な技術なんだ。

二次元って、縦と横を同時に考えられるってことですか？

その通り。例えば、Webサイトのヘッダー、サイドバー、メインコンテンツ、フッターのような複雑なレイアウトも、CSS Gridなら直感的に実装できるんだ。まずは基本から見ていこう。

CSS Gridとは

CSS Grid（グリッドレイアウト）は、Webページを行（row）と列（column）で構成されるグリッド状に分割し、要素を配置するレイアウトシステムです。Flexboxが一次元（一方向）のレイアウトに特化しているのに対し、CSS Gridは二次元（縦横両方向）のレイアウトを直感的に実現できます。

CSS Gridの特徴

CSS Gridは、複雑なレイアウトを驚くほどシンプルなコードで実現できる、現代Web開発に欠かせない技術です。

CSS Gridを使うと、どんなレイアウトが作れるんですか？

例えば、ヘッダー、サイドバー、メインコンテンツ、フッターのような典型的なWebサイトのレイアウトや、画像ギャラリー、カードグリッド、ダッシュボードなど、あらゆる二次元的なデザインを実現できるよ。

CSS Gridの実用例

実際のWebサイトでは、以下のようなレイアウトパターンでCSS Gridが活用されています。

すごい！こんなに複雑なレイアウトも、CSS Gridなら作れるんですね。

そうだね。それでは、CSS Gridの基本的な仕組みから順番に学んでいこう。

グリッドコンテナーとグリッドアイテム

CSS Gridも、Flexboxと同様に親要素（グリッドコンテナー）と子要素（グリッドアイテム）の関係で成り立っています。親要素にdisplay: gridを指定することで、グリッドレイアウトが有効になります。

基本的なHTML構造

CSS Gridを使用する場合の基本的なHTML構造は以下の通りです。

<div class="grid-container">
    <div class="grid-item">アイテム1</div>
    <div class="grid-item">アイテム2</div>
    <div class="grid-item">アイテム3</div>
    <div class="grid-item">アイテム4</div>
    <div class="grid-item">アイテム5</div>
    <div class="grid-item">アイテム6</div>
</div>

グリッドコンテナーの有効化

親要素にdisplay: gridを指定するだけで、CSS Gridが有効になります。

.grid-container {
    display: grid;
}

ただし、これだけでは列数や行数が定義されていないため、すべてのアイテムが縦に並びます。実際のグリッドレイアウトを作るには、行と列の定義が必要です。

実際に試してみよう

以下のコードエディタで、display: gridを指定して、グリッドコンテナーがどのように機能するか確認してみてください。

display: gridを指定するだけで、子要素が自動的にグリッドアイテムになるんですね。

その通り。ただし、レイアウトを制御するには行と列の定義が必要だよ。次はそれを見ていこう。

グリッドトラック（行と列の定義）

グリッドトラックとは、グリッドの行（row）または列（column）のことを指します。grid-template-columnsとgrid-template-rowsプロパティで、グリッドの列数・行数とそれぞれのサイズを定義します。

grid-template-columns（列の定義）

grid-template-columnsは、グリッドの列数とそれぞれの幅を指定します。

基本的な指定方法

/* 3列のグリッド、各列は均等幅 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

/* repeat()を使った簡潔な書き方 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* 固定幅とフレキシブル幅の組み合わせ */
.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
}

待って、例えば6個のアイテムがある場合、grid-template-columns: repeat(3, 1fr);のように3列のグリッドを指定すると、どう配置されるんですか？

大事なポイントだね。3列を指定すると、4個目以降のアイテムは自動的に次の行に配置されるんだ。つまり6個のアイテムは自動的に2行×3列のグリッドになる。

行数を指定しなくても、自動で作ってくれるんですね！

そういうこと。これを「暗黙的なグリッド」と呼ぶよ。grid-template-columnsだけ指定すれば、必要な行は自動生成される。

実際に試してみよう

以下のコードエディタで、grid-template-columnsの値を変更して、列の幅がどのように変わるか試してみてください。

grid-template-rows（行の定義）

grid-template-rowsは、グリッドの各行の高さを指定するプロパティです。

6個のアイテムに3列を指定したら2行になりましたよね。この「2行」って、どうやって決まってるんですか？

前回も触れたけど、それはアイテムの総数÷列数で自動的に決まるんだ。6個÷3列=2行ということだね。

じゃあ、grid-template-rowsは何のためにあるんですか？

grid-template-rowsは行数を決めるものではなく、各行の高さを指定するためのプロパティなんだ。行数は列数とアイテム数で自動的に決まるけど、それぞれの行をどのくらいの高さにするかは自分で決められる。

/* 3列を指定→6個のアイテムは自動的に2行になる */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 行数は指定していないが、6個÷3列=2行になる */
}

/* 2行の高さを指定する */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 150px;  /* 1行目100px、2行目150px */
}

/* 行の高さを統一する場合 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 150px);  /* 両方とも150px */
}

実際に試してみよう

grid-template-rowsを追加して、行の高さを制御してみてください。

frって便利ですね！比率で指定できるから、レスポンシブ対応も簡単そうです。

そうだね。frを使えば、画面サイズに応じて自動的に調整されるから、柔軟なレイアウトが作れるよ。

repeat()関数の活用

repeat()関数を使うと、同じパターンを繰り返す記述を簡潔にできます。

/* 通常の書き方 */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* repeat()を使った書き方 */
grid-template-columns: repeat(4, 1fr);

/* 複雑なパターンも繰り返せる */
grid-template-columns: repeat(3, 100px 200px);
/* 結果: 100px 200px 100px 200px 100px 200px */

minmax()関数

minmax()関数は、グリッドトラックの最小値と最大値を指定できる関数です。レスポンシブデザインで、一定の範囲内でサイズを柔軟に調整したい場合に活用します。

/* 最小200px、最大1frで伸縮 */
grid-template-columns: minmax(200px, 1fr);

/* 最小100px、最大300pxの範囲で調整 */
grid-template-columns: repeat(3, minmax(100px, 300px));

/* 最小は内容に応じて、最大は均等幅 */
grid-template-columns: minmax(auto, 1fr);

第1引数が最小値、第2引数が最大値を表します。利用可能な空間に応じて、この範囲内でトラックのサイズが自動調整されます。

auto-fillとauto-fit

repeat()関数と組み合わせて、auto-fillやauto-fitを使うと、利用可能な空間に応じて自動的に列数を調整できます。minmax()と組み合わせることで、画面幅に応じた完全レスポンシブなグリッドが実現できます。

/* 最小200px、最大1frの列を自動的に配置 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

この指定により、画面幅に応じて列数が自動的に変化するレスポンシブなグリッドレイアウトが実現できます。

グリッドラインとグリッドセル

CSS Gridの構造を理解するために、重要な用語を押さえておきましょう。

グリッドライン

グリッドラインは、グリッドを区切る線のことです。行と列のそれぞれにライン番号が振られています。

グリッドラインの番号を使うことで、アイテムを任意の位置に配置したり、複数のセルにまたがって配置したりできます。

グリッドラインの番号って、どういうときに使うんですか？

例えば、ヘッダーをページ全体の幅に広げたいときなどに使うよ。後で詳しく見ていくね。

グリッドセル

グリッドセルは、1つの行と1つの列で囲まれた最小単位の領域です。表計算ソフトのセルと同じようなイメージです。

通常、グリッドアイテムは自動的に1つのセルに配置されますが、複数のセルにまたがって配置することもできます。

グリッドエリア

グリッドエリアは、複数のグリッドセルをまとめた領域です。グリッドラインで囲まれた任意の矩形領域を指します。

1つのセルだけのエリアも、複数のセルをまたぐエリアも、どちらもグリッドエリアと呼ばれます。

グリッドギャップ（隙間の調整）

グリッドアイテム間の隙間を調整するには、gapプロパティ（旧名: grid-gap）を使用します。Flexboxのgapと同じように、アイテム間の余白を簡潔に指定できます。

gapプロパティの使い方

/* 行と列の両方に同じ隙間を設定 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* 行と列で異なる隙間を設定 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem; /* 行 列 の順 */
}

/* 行と列を個別に指定 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2rem;
    column-gap: 1rem;
}

実際に試してみよう

以下のコードエディタで、gapの値を変更して、アイテム間の隙間がどのように変わるか試してみてください。

gapを使えば、簡単にアイテム間の隙間を調整できるんですね。Flexboxと同じで便利です。

そうだね。gapはFlexboxとGridの両方で使える共通のプロパティだから、覚えやすいよ。

グリッドアイテムの配置

ここまでは、グリッドアイテムが自動的に配置される方法を見てきました。しかし、CSS Gridの真価は、アイテムを任意の位置に配置できることにあります。

自動配置

デフォルトでは、グリッドアイテムは左上から順番に、行優先で自動的に配置されます。

grid-auto-flow（配置方向の制御）

grid-auto-flowプロパティで、アイテムの自動配置方向を変更できます。

/* 列優先で配置 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 100px);
    grid-auto-flow: column;
}

実際に試してみよう

grid-auto-flowの値をrowからcolumnに変更して、配置方向がどのように変わるか確認してみてください。

アイテムの明示的な配置

グリッドラインを使って、アイテムを任意の位置に配置することもできます。これは次回のレッスンで詳しく学びますが、基本的な考え方を紹介します。

/* アイテムを特定の位置に配置 */
.item-1 {
    grid-column: 1 / 3; /* 列ライン1から3まで（2列分） */
    grid-row: 1 / 2;    /* 行ライン1から2まで（1行分） */
}

このように、グリッドラインの番号を指定することで、アイテムを複数のセルにまたがって配置したり、特定の位置に配置したりできます。

グリッドラインの番号を使えば、ヘッダーを横幅いっぱいに広げることもできるんですね！

その通り。次回のレッスンでは、この配置方法を詳しく学んで、実用的なレイアウトを作っていくよ。

理解度チェッククイズ

それじゃあ、今日学んだCSS Gridの基礎を確認してみよう。6問のクイズに挑戦してみてね！

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 150px;
}
/* 6個のアイテムがある場合 */

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

まとめ

CSS Gridって、行と列を同時に制御できるから、複雑なレイアウトも作りやすそうですね。

grid-template-columnsとgrid-template-rowsで構造を定義して、gapで隙間を調整すれば、基本的なグリッドが作れました！

いいね。今日学んだのは基礎の部分だけど、これがCSS Gridの土台になるよ。次は、アイテムを自由に配置する方法や、実用的なレイアウトパターンを学んでいこう。