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

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

作成できる「CSS Grid Generator」

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

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

cssgrid3

CSS Grid Generator リンク先

cssgrid5

Column数、Row数を設定したら

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

いきます。

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

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

cssgrid2

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

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

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

cssgrid1

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

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

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

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

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

よかったらシェアしてください!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次