CSS ・ Flexbox・Grid
CSS Grid
線を引いて区切った場所に要素を並べる
CSS Grid（グリッドレイアウト）は、縦と横の線で親要素を区切り、その中に子要素を配置するしくみです。親要素に display: grid を書き、行と列の大きさを親で決めます。
01
サンプルコード
HTML
1<div class="wrapper">
2 <div class="box_01">要素1</div>
3 <div class="box_02">要素2</div>
4 <div class="box_03">要素3</div>
5 <div class="box_04">要素4</div>
6 <div class="box_05">要素5</div>
7 <div class="box_06">要素6</div>
8</div>
CSS
1.wrapper {
2 height: 200px;
3 background-color: #ddd;
4 border: #aaa 1px solid;
5 display: grid;
6 grid-template-columns: 1fr 1fr 1fr; /* 3つのトラック（列）を定義 */
7 grid-template-rows: 1fr 1fr; /* 2つのトラック（行）を定義 */
8}
9.wrapper div {
10 font-size: 12px;
11}
12.box_01 { background-color: red; }
13.box_02 { background-color: green; }
14.box_03 { background-color: blue; }
15.box_04 { background-color: yellow; }
16.box_05 { background-color: cyan; }
17.box_06 { background-color: purple; }
02
実行結果
ブラウザでの表示親に3列×2行の線を引くと、6つの子要素が左上から順にマスへ入ります
03
解説
グリッドとは、列と行を決める横の線と縦の線が交差したものです。grid のプロパティを使うと、要素をグリッド上の行と列の中に配置できます。table のようにマス同士をつなげたり、自由な位置に置いたりできるのが特徴です。
使い方は、並べたい要素を囲む親要素に display: grid を指定し、grid-template-columns（列）と grid-template-rows（行）で線の引き方を決めます。上の例は「3列×2行」なので、6つの子要素が左上から順に1マスずつ入ります。
Flexbox は子要素ごとに幅を決めていきますが、Grid は 親要素で先に線を引き、区切られた場所に子要素を当てはめていきます。違いは「Grid と Flexbox の違い」のページで詳しく比べています。
04
応用例・注意点
Grid レイアウトで使われる用語
| 用語 | 説明 |
|---|---|
コンテナ | Grid レイアウト全体を囲む要素（display: grid を書いた親要素） |
アイテム | コンテナの子要素すべて（孫要素は含まない） |
ライン | グリッドの枠線を作る縦と横の線。左上から 1, 2, 3… と番号が付く |
トラック | グリッドの行と列のこと。ラインとラインに挟まれた帯 |
セル | トラック内に指定するコンテンツのこと。グリッドの最小単位（1マス） |
エリア | トラック同士が重なった場所。複数のセルをまとめた範囲 |
複雑なレイアウトはジェネレーターで作る
マスをまたぐような複雑なレイアウトは、オンラインで公開されているジェネレーターを使えばOKです。講義では CSS Grid Generator（cssgrid-generator.netlify.app）が紹介されています。列数・行数・間隔を入力し、マスをドラッグして範囲を選ぶと、コードを書き出してくれます。
CSS
1/* CSS Grid Generator が書き出すコードの例 */
2.parent {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 grid-template-rows: repeat(2, 1fr);
6 grid-column-gap: 0px;
7 grid-row-gap: 0px;
8}
9.div1 { grid-area: 1 / 1 / 3 / 2; }
注意点
- 01display: grid は並べたい要素そのものではなく、それを囲む親要素に書きます。
- 02効くのは直下の子要素だけです。孫要素も並べたいときは、子要素にも display: grid を指定します。
- 03ジェネレーターが書き出す grid-area: 1 / 1 / 3 / 2 は「行の開始 / 列の開始 / 行の終了 / 列の終了」のライン番号を1行にまとめた書き方です。
05
Grid で使うプロパティ一覧
Grid のプロパティも、Flexbox と同じく 親要素（コンテナ）に書くもの と 子要素（アイテム）に書くもの があります。まずは下の5つを覚えれば、基本的なレイアウトが作れます。
親要素（コンテナ）に書くプロパティ
| プロパティ | 役割 |
|---|---|
display: grid | コンテナの役割を担う HTML 要素に指定する |
grid-template-rows | 行のトラックの高さを指定 |
grid-template-columns | 列のトラックの横幅を指定 |
gap | トラック同士の間隔 |
place-items | セルの中でのアイテムの位置（縦横まとめて） |
子要素（アイテム）に書くプロパティ
| プロパティ | 役割 |
|---|---|
grid-row | アイテムを配置するときに、行のライン番号を指定 |
grid-column | アイテムを配置するときに、列のライン番号を指定 |
単位「fr」
frは Grid 専用の単位で、余った幅（高さ）を分け合います。1fr 1fr 1frなら3等分です。frを使えば、親要素にぴったり収まるようにトラックが配置されます。