要約
Flexbox に精通している場合は、Grid も使い慣れているはずです。Rachel Andrew が運営するCSS グリッド専用のウェブサイトは、学習に役立ちます。Google Chrome でグリッド表示が利用可能になりました。
Flexbox ですか？グリッド
ここ数年で CSS Flexbox は広く使用されるようになり、ブラウザのサポートも非常に良好です（IE9 以前をサポートしなければならない悲しい運命の人以外は）。Flexbox により、要素間の均等な間隔、上から下へのレイアウト、CSS の魔法の最高峰である垂直方向の中央揃えなど、複雑なレイアウト作業が大幅に簡素化されました。
しかし、画面には通常、考慮すべき 2 つ目のディメンションがあります。残念ながら、要素のサイズを自分で調整しない限り、Flexbox のみを使用して縦方向と横方向の両方のリズムを実現することはできません。そこで役立つのが CSS グリッドです。
CSS グリッドは、ほとんどのブラウザでフラグが設定された状態で5 年以上開発されてきました。また、Flexbox のようにバグのあるリリースを回避するために、相互運用性に時間をかけてきました。そのため、Chrome でグリッドを使用してレイアウトを実装すると、Firefox と Safari でも同じ結果が得られる可能性があります。執筆時点では、Microsoft Edge の Grid の実装は古く（IE11 にすでに存在していたものと同じ）、更新は「検討中」です。
コンセプトと構文は類似していますが、Flexbox と Grid を競合するレイアウト手法と見なさないでください。グリッドは 2 次元で配置されますが、Flexbox は 1 次元で配置されます。2 つを併用すると相乗効果が得られます。
グリッドの定義
グリッドの個々のプロパティを理解するには、Rachel Andrew の Grid By Example または CSS Tricks のCheat Sheet をおすすめします。Flexbox に精通している場合は、多くのプロパティとその意味に精通しているはずです。
標準の 12 列グリッド レイアウトを見てみましょう。12 列のクラシック レイアウトは、12 が 2、3、4、6 で割り切れるため、多くのデザインに役立ちます。このレイアウトを実装しましょう。
まず、マークアップ コードから見てみましょう。
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
スタイルシートでは、まず body を拡張してビューポート全体を覆い、グリッド コンテナに変換します。
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
これで、CSS グリッドを使用しています。送信しました
次のステップは、グリッドの行と列を実装することです。モックアップに 12 個の列をすべて実装することもできますが、すべての列を使用するわけではないため、そうすると CSS が不必要に複雑になります。わかりやすくするために、レイアウトを次のように実装します。
ヘッダーとフッターの幅は可変で、コンテンツの両方のディメンションは可変です。ナビゲーションも両方のディメンションで可変になりますが、最小幅は 200 ピクセルに設定されます。（なぜもちろん、CSS グリッドの機能をアピールするためです）。
CSS グリッドでは、列と行のセットのことをトラックと呼びます。まず、最初のトラックセット（行）を定義します。
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows は、個々の行を定義するサイズのシーケンスを受け取ります。この場合、最初の行の高さを 150 ピクセルに、最後の行の高さを 100 ピクセルに設定します。中央の行は auto に設定されています。つまり、その行のグリッドアイテム（グリッド コンテナの子）を収容するために必要な高さに調整されます。本文はビューポート全体に広がるため、コンテンツを含むトラック（上の図では黄色）は、少なくとも使用可能なスペース全体を埋めますが、必要に応じて拡大し（ドキュメントをスクロールします）。
列については、より動的アプローチをとります。ナビゲーションとコンテンツの両方を拡大（および縮小）しますが、ナビゲーションを 200 ピクセル未満に縮小することはなく、コンテンツをナビゲーションよりも大きくします。Flexbox では flex-grow と flex-shrink を使用しますが、グリッドでは少し異なります。
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
2 つの列を定義します。最初の列は minmax() 関数を使用して定義されます。この関数は、そのトラックの最小サイズと最大サイズの 2 つの値を受け取ります。（min-width と max-width を 1 つにまとめたようなものです）。前述のように、最小幅は 200 ピクセルです。最大幅は 3fr です。fr はグリッド固有の単位で、使用可能なスペースをグリッド要素に分散できます。fr は「小数単位」を意味しますが、まもなく「フリー単位」を意味する可能性もあります。ここで指定した値は、両方の列が画面全体に広がることを意味しますが、ナビゲーション列の幅が 200 ピクセルより大きい場合、コンテンツ列の幅は常にナビゲーション列の 3 倍になります。
グリッドアイテムの配置はまだ正しくありませんが、行と列のサイズは正しく動作し、目的の動作が得られます。
アイテムの配置
グリッドの最も強力な機能の 1 つは、DOM の順序に関係なくアイテムを配置できることです。（ただし、スクリーン リーダーは DOM をナビゲートするため、適切にアクセスできるように要素の並べ替え方法に注意する必要があります）。手動で配置しない場合、要素は DOM の順序でグリッドに配置され、左から右、上から下に並べられます。各要素は 1 つのセルを占有します。グリッドに値を入力する順序は、grid-auto-flow を使用して変更できます。
では、要素を配置するにはどうすればよいでしょうか。グリッド アイテムを配置する最も簡単な方法は、アイテムが対象とする列と行を定義することです。グリッドには、これを行うための 2 つの構文があります。最初の構文では、始点と終点を定義します。2 つ目のタグでは、開始ポイントと範囲を定義します。
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
ヘッダーは最初の列から始まり、3 番目の列の前で終わるようにします。ナビゲーション バーは 2 行目から始まり、合計 2 行にまたがるようにします。
技術的には、レイアウトの実装は完了していますが、グリッドが提供する便利な機能のいくつかを紹介して、配置を簡単にします。1 つ目の機能は、トラック境界に名前を付け、その名前を配置に使用できることです。
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
上記のコードは、前のコードと同じレイアウトになります。
さらに便利なのが、グリッド内の領域全体に名前を付ける機能です。
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas は、スペース区切りの名前の文字列を受け取ります。これにより、デベロッパーは各セルに名前を付けることができます。隣接する 2 つのセルに同じ名前が付けられている場合、それらは同じ領域に統合されます。これにより、レイアウト コードにセマンティクスを追加し、メディアクエリをより直感的にできます。このコードも、前回と同じレイアウトを生成します。
他に
はい、1 つのブログ投稿では説明しきれないほどです。Rachel Andrew は GDE であり、CSS ワーキング グループの招待専門家です。Grid によってウェブデザインが簡素化されるように、最初からワーキング グループと協力してきました。彼女は、このテーマについて書籍も執筆しています。彼女のウェブサイト Grid By Example は、グリッドに慣れるうえで貴重なリソースです。グリッドはウェブデザインの画期的なステップであると考える人は少なくありません。現在、Chrome ではグリッドがデフォルトで有効になっているため、今すぐ使用を開始できます。