デベロッパーツールの新機能が便利！CSS Gridの実装と検証が簡単になるCSS Grid editorとオーバーレイ

先日リリースされたChrome 92のデベロッパーツールに、CSS Gridの実装に役立つ新機能が2つ加わりました！

1つ目はCSS Grid editorでデバッキングツール、2つ目はCSS Gridのオーバーレイ、どちらもWeb制作でCSS Gridを使用する時に大活躍すること間違いなしです。

参考: New CSS Grid debugging tools

機能は簡単に言うと、先日当ブログで紹介したCSS FlexboxのCSS Grid版です。
参考: 先日の記事

CSS Gridの新機能は非常に便利で、使い方も簡単です。
まずは、Chrome 92にアップデート済みか確認します。

Chrome 92にアップデート済みか確認

Webページを表示して、デベロッパーツールを通常通りに開きます。ElementsパネルからCSS Gridで実装している要素を選択し、Stylesパネルを開きます。

デベロッパーツールを起動

ページ上のHTML要素にdisplay: grid;が適用されている場合、その横にgridバッジが表示されます。

display: grid;の横のgridバッジをクリック

gridバッジをクリックすると、CSS Grid editorが起動します。エディタでは、CSS Gridの各プロパティを簡単に編集できます。

CSS Grid editorが開く

CSS GridのオーバーレイはLayoutパネルにあります。Grid overlaysセクションがあり、ページ上のすべてのGrid要素を表示し、各要素のオーバーレイを切り替えることができます。

CSS Gridを使用している要素がオーバーレイで簡単に分かる