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