Firefox56で追加されたCSS Grid DevToolsが便利!!

Firefox56から、開発者ツールのインスペクターに、CSS Grid Layout用のデバッグツールが追加されました。

Gridの分割位置を画面上に表示してくれます。

これは便利!!

WPFのGridコントロールで、ShowGridLines="True"にしたときのような表示ですね!!

grid-template-areasを使ってグリッドの書くエリアに名前を付けた場合、エリア名も表示することができます。

.wrapper{display: grid;
      width: 100%;
      height: 100%;
      grid-template-columns: 150px3fr 1fr;
      grid-template-rows: auto1fr auto;
      grid-template-areas: 
          "header header header""left  content right""footer footer footer";
      padding: 10px;
    }

CSS Grid Layoutを使った画面レイアウトでは、Firefoxの開発者ツールがとても役に立ちそうです。
こういう風にブラウザに標準で専用ツールが付いてくると、今後ますますCSS Grid Layoutの普及に拍車がかかりそうですね!!