要約
Flexbox と Grid を使い慣れている方は、Rachel Andrew は、CSS Grid 専用のウェブサイトを運営し、簡単に使い始められるようにしています。Google Chrome でグリッドを利用できるようになりました。
Flexbox、グリッド、
ここ数年で CSS Flexbox が広く普及し、ブラウザ サポートは非常に良い状態です（IE9 以前をサポートする必要に迫られている場合を除きます）。Flexbox は、要素間の等間隔、上から下へのレイアウト、CSS の魔法のような究極の垂直センタリングなど、多数の複雑なレイアウト タスクを容易にしました。
残念ながら、画面には一般に 2 つ目の側面があります。残念ながら、要素のサイズを自分で調整しなければ、Flexbox だけで垂直方向と水平方向のリズムを同時に持たせることはできません。そこで出番となるのが CSS グリッドです。
CSS Grid は開発段階にあり、ほとんどのブラウザで 5 年以上前から開発されており、Flexbox のようなバグの多いリリースを避けるために、相互運用性に余分な時間を費やしてきました。つまり、グリッドを使用して Chrome にレイアウトを実装すれば、Firefox と Safari で同じ結果が得られる可能性があります。この記事の執筆時点で、Microsoft の Edge の Grid 実装は最新ではなく（IE11 にすでに存在していたものと同じ）、このアップデートは「検討中」です。
概念と構文は似ていますが、Flexbox とグリッドは競合するレイアウト手法ではありません。グリッドは 2 次元で Flexbox は 1 次元で配置されます両者を併用すると相乗効果が生まれます。
グリッドの定義
Grid の個々のプロパティに慣れるため、Rachel Andrew の Grid By Example または CSS Tricks の Cheat Sheet を心からおすすめします。Flexbox に精通していれば、多くのプロパティとその意味はご存じでしょう。
標準的な 12 列のグリッド レイアウトを見てみましょう。数字の 12 は 2、3、4、6 で割り切れることから、従来の 12 列のレイアウトが人気で、多くのデザインで有用です。このレイアウトを実装してみましょう。
マークアップ コードから始めましょう。
<!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 Grid の機能を紹介することですから）
CSS グリッドでは、列と行のセットを「トラック」と呼びます。まず、最初のトラックのセットである行を定義しましょう。
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows は、個々の行を定義する一連のサイズを受け取ります。この例では、最初の行の高さを 150 px、最後の行の高さを 100 px に設定します。中央の行は auto に設定されています。つまり、その行のグリッド アイテム（グリッド コンテナの子）を表示するために必要な高さに調整されます。ボディはビューポート全体に引き伸ばされるため、コンテンツを含むトラック（上の図の黄色）は少なくとも使用可能なスペースをすべて占有しますが、必要に応じて拡大します（また、ドキュメントをスクロールします）。
列では、より動的なアプローチを採用します。ナビゲーションとコンテンツの両方を拡大（および縮小）し、ナビゲーションが 200 ピクセル未満に縮小されることは避け、コンテンツは nav よりも大きくする必要があります。Flexbox では flex-grow と flex-srink を使用しますが、Grid では少し異なります。
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
ここでは 2 つの列を定義します。最初の列は、minmax() 関数を使用して定義されます。この関数はトラックの最小サイズと最大サイズの 2 つの値を取ります。（min-width と max-width がひとつになったようなものです）。最小幅は前述のとおり 200 ピクセルです。幅は最大 3fr です。fr はグリッド固有の単位であり、使用可能なスペースをグリッド要素に分散できます。fr はおそらく「分数単位」の略ですが、まもなく自由単位を意味することもあります。ここでの値により、両方の列が画面全体に表示されますが、コンテンツ列の幅は常にナビゲーション列の 3 倍になります（ナビゲーション列の幅が 200 ピクセルを超える場合）。
グリッド アイテムの配置はまだ正しくありませんが、行と列のサイズは正しく動作し、想定していた動作を実現しています。
アイテムの配置
グリッドの最も強力な機能の一つは、DOM の順序に関係なくアイテムを配置できることです。（ただし、スクリーン リーダーは DOM を操作するため、適切にアクセスできるように、要素の並べ替え方法に注意することを強くおすすめします）。手動で配置しない場合、要素は DOM 順にグリッドに配置され、左から右、上から下に配置されます。各要素は 1 つのセルを占有します。グリッドが塗りつぶされる順序は、grid-auto-flow を使用して変更できます。
では、要素をどのように配置すればよいでしょうか。グリッド アイテムを配置する最も簡単な方法は、それらがカバーする列と行を定義することです。グリッドには、これを行う 2 つの構文が用意されています。最初の構文では、開始点と終了点を定義します。2 つ目のテンプレートでは、開始点とスパンを定義します。
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
見出しは 1 列目から開始し、3 列目より前に終点にします。ナビゲーションは 2 行目から開始し、合計 2 行にわたる必要があります。
技術的にはレイアウトの実装は完了していますが、配置を簡単にするためにグリッドに用意されている便利な機能をいくつか紹介します。最初の機能は、トラックの枠線に名前を付け、その名前をプレースメントに使用できることです。
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 つのセルが同じ名前を持つ場合、それらは同じ領域に結合されます。これにより、レイアウト コードにより多くのセマンティクスを提供し、メディアクエリをより直感的にすることができます。ここでも、このコードは以前と同じレイアウトを生成します。
他にもありますか？
そのとおりです。単一のブログ投稿でカバーするには多すぎます。GDE でもある Rachel Andrew は、CSS Working Group の招待エキスパートであり、Grid がウェブデザインを簡素化するために最初から協力しています。その問題について本も書いたこともあります。彼女のウェブサイト Grid By Example は、Grid に慣れるための貴重なリソースです。グリッドはウェブデザインの画期的な手段だと多くの人が考えています。グリッドは現在 Chrome ではデフォルトで有効になっているため、すぐに使い始めることができます。