要約
Flexbox に慣れていれば、Grid も見覚えがあるでしょう。Rachel Andrew さんは、簡単に始められるように、CSS グリッド専用のウェブサイトを運営しています。Google Chrome でグリッドをご利用いただけるようになりました。
Flexbox か？グリッド？
CSS Flexbox はここ数年で広く普及し、ブラウザ サポートは非常に良い状態になっています（IE9 以下をサポートしなければならない場合は除きます）。Flexbox を使用すると、要素間の等間隔の間隔、上から下へのレイアウト、CSS ウィザードの垂直方向の配置など、複雑なレイアウト作業の多くが簡単になります。
残念ながら、一般的に画面には 2 つ目の次元について考慮する必要があります。要素のサイズ調整を自分で行う必要がないため、フレックスボックスだけを使用するだけで、垂直と水平の両方のリズムを整えることはできません。そこで出番となるのが CSS グリッドです。
CSS Grid は 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 をひとつにしたようなものです）。最小幅は前述のとおり
200 ピクセルです最大幅は 3fr です。fr はグリッド固有の単位です。これを使用すると、使用可能なスペースをグリッド要素に分散できます。fr はおそらく「フラクション ユニット」の略ですが、まもなく空きユニットがあることを意味する場合もあります。ここでの値は、両方の列が画面全体に表示されるように拡大することを意味しますが、コンテンツ列の幅は常に nav 列の 3 倍になります（nav 列の幅が 200 ピクセルを超える場合）。
グリッド アイテムの配置はまだ正しくありませんが、行と列のサイズは正しく動作し、目指す動作を実現しています。
アイテムの配置
Grid の最も強力な機能の 1 つは、DOM の順序によらずにアイテムを配置できることです。（ただし、スクリーン リーダーは DOM 内を移動するため、適切にアクセスできるよう、要素の並べ替えに注意することを強くおすすめします）。手動で配置しない場合、要素は DOM 順で左から右、上から下に配置されます。各要素は 1 つのセルを占有します。グリッドを塗りつぶす順序は grid-auto-flow を使用して変更できます。
では、要素をどのように配置すればよいのでしょうか。グリッド アイテムを配置する最も簡単な方法は、カバーする列と行を定義することです。グリッドではこれを行うために 2 つの構文があります 1 つ目の構文では開始点と終了点を定義します2 つ目は開始点とスパンを定義します。
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
ヘッダーを 1 列目から開始し、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 ではデフォルトで有効になっており、今すぐ使い始めることができます。