レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。 そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがCss Grid Highlighter for Chromeになります。

Css Grid Highlighter for Chromeの使い方

Chrome機能拡張としてインストールします。

そうするとグリッドの設定がハイライト表示されるようになります。

複雑なデザインであっても(Aは横、Bは縦に二つ分です)分かりやすくなります。

さらに複雑なグリッド構成。

見た感じと実際の設定が異なる場合、ハイライト表示が役立ちます。

グリッド同士に幅がある場合の表示です。

CSS Grid Highlighter for Chromeを使うことで、これからCSS Gridを学んだり、実際に使っていく際に役立ってくれることでしょう。まだ対応ブラウザは多くありませんが、今後普及していくテクニックだけに早めの習得がお勧めです。

CSS Grid Highlighter for ChromeはGoogle Chrome用のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

ademilter/chrome-css-grid-highlighter: Css Grid Highlighter for Chrome