これまでにFlexboxを使って、要素を横や縦に並べる方法を学びましたね。Flexboxは1次元（行または列）の配置に優れていますが、Webサイト全体のような複雑な2次元のレイアウト（行と列の組み合わせ）を効率よく作るには、少し限界があります。
そこで登場するのが、**CSS Grid（グリッド）です。Gridは、Webサイトの全体的なレイアウトを縦横の格子（グリッド）**で定義するのに最適な方法です。まるで建築家が家の設計図を描くように、あらかじめWebページの配置を決めることができます。
GridはFlexboxと組み合わせて使うことで、より強力なレイアウトを可能にします。
Gridの基本概念：縦横に広がる「格子」
Flexboxが「親と子」の関係で要素を並べるのに対し、Gridは「行（row）」と「列（column）」の概念を導入します。
- Gridコンテナ：Flexboxの親要素に当たるもので、
display: grid;を設定します。 - Gridアイテム：Gridコンテナの中に配置される子要素です。
Gridを使う際は、まずGridコンテナにプロパティを設定して、全体的なレイアウトの「設計図」を作成します。
Gridの使い方：3つのプロパティで実践！
Gridの基本的な使い方を、3つのプロパティを使って見ていきましょう。
1. grid-template-columns：列の幅を決める
Webページの列をいくつ作るか、そしてそれぞれの幅をどれくらいにするかを指定します。
CSS
.container {
display: grid;
/* 3つの列を作成し、それぞれの幅を200px、100px、200pxにする */
grid-template-columns: 200px 100px 200px;
}
fr単位：Gridでは「fr（fraction）」という独自の単位がよく使われます。これは、利用可能なスペースの「割合」を示す単位で、レスポンシブなレイアウトを作るのに非常に便利です。
CSS
.container {
display: grid;
/* 3つの列を作成し、幅の比率を1:2:1にする */
grid-template-columns: 1fr 2fr 1fr;
}
2. grid-template-rows：行の高さを決める
Webページの行をいくつ作るか、そしてそれぞれの高さをどれくらいにするかを指定します。
CSS
.container {
display: grid;
/* 2つの行を作成し、それぞれの高さを100pxにする */
grid-template-rows: 100px 100px;
}
3. grid-gap：要素間の隙間を決める
Gridアイテム同士の間に、均一な隙間を作成します。grid-gapはgrid-column-gap（列の隙間）とgrid-row-gap（行の隙間）をまとめて指定できる便利なプロパティです。
CSS
.container {
display: grid;
/* アイテム間の隙間を上下左右20pxにする */
grid-gap: 20px;
}
まとめ：FlexboxとGridを使いこなそう
FlexboxとGridは、どちらか一方だけを使うのではなく、組み合わせて使うことで真価を発揮します。
- Gridで、ページ全体の大きなレイアウト（ヘッダー、サイドバー、メインコンテンツなど）を2次元的に配置する。
- Flexboxで、それぞれのエリア内の小さな部品（ナビゲーションメニューのアイテムなど）を1次元的に並べる。
この使い分けを意識することで、より整理された、そして効率的なコーディングができるようになります。Gridは少し難しく感じるかもしれませんが、一度マスターすれば、あなたのWebデザインの可能性は大きく広がるでしょう。
