We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ルールビューのグリッドアイコン

Firefox 52 の新機能

Firefox 52 よりインスペクターで、グリッドレイアウトを調査するときにグリッドの状態を重ねて表示させることができます。

ルールビューに表示している要素に display: grid 宣言がある場合に、グリッドのアイコン () が現れます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します:

ほかの要素を選択してもグリッド表示が残りますので、グリッドアイテムの CSS を編集してグリッドにどのような影響があるかを確認できます。

グリッドレイアウトパネル

Firefox 56 の新機能

Firefox 56 では従来のグリッド機能に加えて、グリッドのデバッグのための設定や情報を満載した新しいレイアウトパネルを提供します。このパネルについて必要な情報を、Powerful New Additions to the CSS Grid Inspector in Firefox Nightly の記事で得られます。

関連情報

  • labs.jensimmons.com で、さまざまな興味深いグリッドの例をご覧ください。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss
最終更新者: yyss,