SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

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

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

Gridの分割位置を画面上に表示してくれます。
f:id:minami_SC:20171004224253p:plain

これは便利!!

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

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

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

f:id:minami_SC:20171004224308p:plain

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