CSS Grid Generator - CSSグリッドを簡単に作成
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!