WebのGridレイアウトを視覚的に作成できるWebサービス 『Griddy』

WebのGridレイアウトを視覚的に
作成できるWebサービス。
各種CSSプロパティの調整も可能で
細かくレイアウトを設定、CSS出力が可能です。

リンク先

Griddy リンク先はこちらから

使い方

グリッドレイアウト、なかなかCSSコードだけでは難しいものがあり
こういう視覚化してくれると分かりやすいと思います。
Grid-template-columnsやGrid-template-rowsなどの設定で大枠のグリッドを設計します。
ColumnやRowには1frや1pxなど指定が可能で細かくサイズを調整が可能です。

Add or Remove elements within the gridでBoxを増減することができます。
またAdd another column、Rowで更に行や列の追加も可能です。

プロパティにはGapやJustify、Alignなども指定が可能でGridレイアウトを細かく作成が可能です。
出来たデザインは画面下部のCSSコードが出力されているのでコピぺするだけで使えます。
Gridレイアウトを学習するのにとても役立つ便利なWebサービスです。