このガイドでは、Chrome DevTools の [要素] パネルで、ページ上の CSS グリッドを検出して調査する方法、レイアウトに関する問題をデバッグする方法を説明します。
この記事のスクリーンショットに示されている例は、フルーツボックスとスナック ボックスの 2 つのウェブページからのものです。
CSS グリッドの詳細
ページの HTML 要素に display: grid または display: inline-grid が適用されている場合は、[要素] パネルの要素の横に grid バッジが表示されます。
バッジをクリックすると、ページ上のグリッド オーバーレイの表示が切り替わります。オーバーレイは要素の上に表示され、グリッドの線とトラックの位置を示すグリッドのように配置されます。
[レイアウト] ペインを開きます。ページにグリッドがある場合、[レイアウト] ペインに [グリッド] セクションが表示されます。このセクションには、グリッドを表示するためのオプションがいくつか用意されています。
グリッド エディタでグリッド アイテムとそのコンテンツを配置する
CSS ルールを入力する代わりに、ボタンをクリックするだけでグリッド アイテムとそのコンテンツの配置を調整できます。
グリッド アイテムとそのコンテンツを並べ替えるには:
[要素] > [スタイル] ペインで、
display: gridの横にある
（グリッド エディタ）ボタンをクリックします。
グリッド エディタで対応するボタンをクリックして、グリッド アイテムとそのコンテンツの
align-*とjustify-*の CSS プロパティを設定します。
調整したグリッド アイテムとビューポートでコンテンツを確認します。
グリッド表示オプション
[Layout] ペインの [Grid] セクションには、次の 2 つのサブセクションがあります。
- オーバーレイ表示の設定
- グリッド オーバーレイ
それぞれのサブセクションを詳しく見ていきましょう。
オーバーレイ表示の設定
[オーバーレイ表示設定] は、次の 2 つの部分で構成されます。
a. 次のオプションを含むプルダウン メニュー:
- ラインラベルを非表示: 各グリッド オーバーレイのラインラベルを非表示にします。
- 行番号を表示: グリッド オーバーレイごとに行番号を表示します（デフォルトで選択されています）。
- Show line name: グリッドに線名がある場合、各グリッド オーバーレイの線名を表示します。
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）のみが表示されます。
エリア名を表示
エリア名を表示するには、[エリア名を表示する] チェックボックスをオンにします。この例では、グリッドに 3 つの領域（top、bottom1、bottom2）があります。
グリッド線を延長
[グリッド線を延長] チェックボックスをオンにして、各軸に沿ってビューポートの端までグリッド線を延長します。
グリッド オーバーレイ
[グリッド オーバーレイ] セクションには、ページ上に存在するグリッドのリストと、各グリッドのチェックボックスとさまざまなオプションが表示されます。
複数のグリッドのオーバーレイ ビューを有効にする
複数のグリッドのオーバーレイ ビューを有効にできます。この例では、main と div.snack-box の 2 つのグリッド オーバーレイが有効で、それぞれが異なる色で表現されています。
グリッド オーバーレイの色をカスタマイズする
カラー選択ツールをクリックして、グリッド オーバーレイの各色をカスタマイズできます。
グリッドをハイライト表示する
ハイライト アイコンをクリックすると、HTML 要素が直ちにハイライト表示され、ページ内でスクロールして、[要素] パネルで選択します。
