要約
Flexbox に精通している場合は、Grid も使い慣れているはずです。Rachel Andrew さんは、簡単に始められる CSS グリッド専用のウェブサイトを運営しています。Google Chrome でグリッド表示が利用可能になりました。
Flexbox ですか？グリッド
ここ数年で CSS Flexbox は広く使用されるようになり、ブラウザのサポートも非常に良好です（IE9 以前をサポートしなければならない場合を除きます）。Flexbox により、要素間の均等な間隔、上から下へのレイアウト、CSS の魔法の最高峰である垂直方向の中央揃えなど、複雑なレイアウト作業が大幅に簡素化されました。
しかし、画面には通常、考慮すべき 2 つ目のディメンションがあります。残念ながら、要素のサイズを自分で調整しない限り、Flexbox のみを使用して縦方向と横方向の両方のリズムを実現することはできません。そこで役立つのが CSS グリッドです。
CSS グリッドは、ほとんどのブラウザでフラグが設定された状態で5 年以上開発されてきました。また、Flexbox のようにバグのあるリリースを回避するために、相互運用性に多くの時間を費やしてきました。したがって、Chrome でグリッドを使用してレイアウトを実装すると、Firefox と Safari でも同じ結果が得られる可能性があります。執筆時点では、Microsoft の Grid の Edge 実装は最新ではありません（IE11 ですでに存在していたものと同じ）。更新は「検討中」です。
コンセプトと構文は類似していますが、Flexbox とグリッドを競合するレイアウト手法とは考えないでください。グリッドは 2 次元に配置され、Flexbox は 1 次元に配置されます。2 つを併用すると相乗効果が得られます。
グリッドの定義
Grid の個々のプロパティに慣れるには、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 ピクセル以下に縮小せず、コンテンツを nav より大きくします。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 倍になります。
グリッドアイテムの配置はまだ正しくありませんが、行と列のサイズは正しく動作し、目的の動作が得られます。
アイテムの配置
Grid の最も強力な機能の 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 は、Grid に慣れるための貴重なリソースです。グリッドはウェブデザインに革命を起こす一歩であると多くの人が考えており、Chrome ではデフォルトで有効になっており、今すぐ使い始めることができます。