Sofia Emelianova
Chrome DevTools では、さまざまな可視化オプションを使用して、CSS グリッド レイアウトを直感的にデバッグできます。
この動画では、[要素] パネルのグリッド オーバーレイを切り替えたり、以下のような操作を行ったりする方法をご紹介しています。
- グリッド レイアウトを可視化して検査する。
- グリッド アイテムの配置時に参照する行番号と列番号をご覧ください。
- グリッド アイテムが多く、数字がわかりにくい場合は、ライン名とエリア名を使用してオーバーレイ上に表示します。
- トラックサイズを確認します。
また、[要素] > [スタイル] ペインの グリッド エディタを使用すると、CSS ルールを入力する代わりに、ボタンをクリックするだけでグリッド レイアウト内でアイテムとそのコンテンツを配置できます。
より実践的な学習体験については、CSS グリッドを検証するのチュートリアルをご覧ください。