CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。 そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上でビジュアル的にCSSグリッドの設計ができます。

CSS Grid Generatorの使い方

メイン画面です。

マウスでドラッグしてグリッドを設計します。

そしてCSSの設定をダウンロードします。

生成されるテンプレートを見れば、その内容は分かると思います。しかし、これを頭で計算して記述するのは面倒です。複雑なグリッドになれば尚更でしょう。CSS Grid Generatorを使うことで素早く設計を行い、そのコードがゲットできるでしょう。

CSS Grid GeneratorはVue製のオープンソース・ソフトウェア(MIT License)です。

CSS Grid Generator sdras/cssgridgenerator: ?Generate basic CSS Grid code to make dynamic layouts!