このガイドでは、Chrome DevTools の [Elements] パネルでページ上の CSS グリッドを検出して検証し、レイアウトの問題をデバッグする方法について説明します。
この記事のスクリーンショットに示されている例は、フルーツ ボックスとスナック ボックスの 2 つのウェブページからのものです。
CSS グリッドについて
ページの HTML 要素に display: grid または display: inline-grid が適用されている場合、[要素] パネルで要素の横に grid バッジが表示されます。
バッジをクリックすると、ページ上でのグリッド オーバーレイの表示が切り替わります。オーバーレイは要素の上に表示され、グリッド線とトラックの位置を示すグリッドのようにレイアウトされます。
[レイアウト] ペインを開きます。グリッドがページに含まれている場合、[レイアウト] ペインには [グリッド] セクションが含まれ、グリッドを表示するためのさまざまなオプションが表示されます。
グリッド エディタでグリッド アイテムとそのコンテンツを配置する
CSS ルールを入力する代わりに、ボタンをクリックするだけでグリッド アイテムとそのコンテンツを配置できます。
グリッド アイテムとそのコンテンツの位置を揃えるには:
[要素] > [スタイル] ペインで、
display: gridの横にある[グリッド エディタ] ボタンをクリックします。
グリッド エディタで、対応するボタンをクリックして、グリッド アイテムとそのコンテンツの
align-*とjustify-*の CSS プロパティを設定します。調整されたグリッド アイテムとコンテンツをビューポートで確認します。
グリッド表示オプション
[レイアウト] ペインの [グリッド] セクションには、次の 2 つのサブセクションがあります。
- オーバーレイ表示の設定
- グリッド オーバーレイ
これらのサブセクションをそれぞれ詳しく見ていきましょう。
オーバーレイ表示の設定
[オーバーレイの表示設定] は、次の 2 つの設定で構成されています。
a. 次のオプションを含むプルダウン メニュー:
- 線ラベルを非表示: 各グリッド オーバーレイの線ラベルを非表示にします。
- 行番号を表示: 各グリッド オーバーレイの行番号を表示します（デフォルトで選択されています）。
- ライン名を表示: ライン名のあるグリッドの場合、各グリッド オーバーレイのライン名を表示します。
b. チェックボックスと以下のオプション:
- トラックサイズを表示: トラックサイズの表示と非表示を切り替えます。
- エリア名を表示: グリッドに名前付きのエリアがある場合に、エリア名の表示と非表示を切り替えます。
- グリッド線を延長する: デフォルトでは、グリッド線は
display: gridまたはdisplay: inline-gridが設定された要素内にのみ表示されます。このオプションをオンにすると、グリッド線は各軸に沿ってビューポートの端まで拡張されます。
これらの設定を詳しく見ていきましょう。
行番号を表示
デフォルトでは、正と負の線番号がグリッド オーバーレイに表示されます。
行ラベルを非表示
[行ラベルを非表示] を選択すると、行番号を非表示にします。
行名を表示
[行名を表示] を選択すると、番号ではなく行名を表示できます。この例では、left、middle1、middle2、right という 4 つの行があります。
このデモでは、CSS grid-column: left / right を使用して、オレンジ色の要素が左から右に広がります。
行名を表示すると、要素の開始位置と終了位置がわかりやすくなります。
トラックサイズを表示
[トラックサイズを表示] チェックボックスをオンにすると、グリッドのトラックサイズが表示されます。
DevTools では、各行ラベルに [authored size] - [computed size] が表示されます。Authored size: スタイルシートで定義されているサイズ（定義されていない場合は省略）。計算済みサイズ: 画面上の実際のサイズ。
このデモでは、snack-box 列のサイズが CSS grid-template-columns:1fr 2fr; で定義されています。そのため、列行のラベルには、作成サイズと計算サイズの両方（1fr - 96.66px と 2fr - 193.32px）が表示されます。
スタイルシートで行サイズが定義されていないため、行行ラベルには計算されたサイズ（80px と 80px）のみが表示されます。
エリア名を表示
エリア名を表示するには、[エリア名を表示する] チェックボックスをオンにします。この例では、グリッド内に top、bottom1、bottom2 の 3 つの領域があります。
グリッド線を延長する
[グリッド線を延長する] チェックボックスをオンにすると、各軸に沿ってグリッド線をビューポートの端まで延長できます。
グリッド オーバーレイ
[グリッド オーバーレイ] には、ページに表示されているグリッドのリストが表示され、それぞれにチェックボックスとさまざまなオプションが表示されます。
複数のグリッドのオーバーレイ ビューを有効にする
複数のグリッドのオーバーレイ ビューを有効にできます。この例では、2 つのグリッド オーバーレイ（main と div.snack-box）が有効になっており、それぞれが異なる色で表されます。
グリッドのオーバーレイの色をカスタマイズする
グリッドのオーバーレイの色をカスタマイズするには、カラー選択ツールをクリックします。
グリッドをハイライト表示
ハイライト アイコンをクリックすると、HTML 要素がすぐにハイライト表示されます。ページ上でスクロールして [要素] パネルで選択します。