CSSで複雑なグリッドデザインも簡単に作成できるWebサービス 『CSS Grid Generator』

CSSで複雑なグリッドデザインも簡単に

作成できる「CSS Grid Generator」

マウス操作で簡単にColumnやRowを

設定して画面上で自由に作成が可能です。

CSS Grid Generator リンク先

Column数、Row数を設定したら

自由にドラッグしてグリッドをデザインして

いきます。

こんな複雑なグリッドデザインも簡単に

CSSコードで出力が可能です。

出力されるコードはこんな感じで

1から自分で書くと大変ですが、

画面上で簡単にグリッドをレイアウトできます。

DIV要素の番号で区切ってくれるので

分かりやすくなっています。

グリッドデザインに挑戦しようかなと思っている方は

一度使ってみては如何でしょうか。

レイアウトの勉強などにも良いかも知れません。