WebのGridレイアウトを視覚的に
作成できるWebサービス。
各種CSSプロパティの調整も可能で
細かくレイアウトを設定、CSS出力が可能です。
![WebのGridレイアウトを視覚的に作成できるWebサービス 『Griddy』](https://pc.mogeringo.com/wp-content/uploads/2023/05/griddy-thumb.jpg)
目次
リンク先
使い方
![WebのGridレイアウトを視覚的に作成できるWebサービス 『Griddy』](https://pc.mogeringo.com/wp-content/uploads/2023/05/griddy1.jpg)
グリッドレイアウト、なかなかCSSコードだけでは難しいものがあり
こういう視覚化してくれると分かりやすいと思います。
Grid-template-columnsやGrid-template-rowsなどの設定で大枠のグリッドを設計します。
ColumnやRowには1frや1pxなど指定が可能で細かくサイズを調整が可能です。
![WebのGridレイアウトを視覚的に作成できるWebサービス 『Griddy』](https://pc.mogeringo.com/wp-content/uploads/2023/05/griddy2.jpg)
Add or Remove elements within the gridでBoxを増減することができます。
またAdd another column、Rowで更に行や列の追加も可能です。
![WebのGridレイアウトを視覚的に作成できるWebサービス 『Griddy』](https://pc.mogeringo.com/wp-content/uploads/2023/05/griddy3.jpg)
プロパティにはGapやJustify、Alignなども指定が可能でGridレイアウトを細かく作成が可能です。
出来たデザインは画面下部のCSSコードが出力されているのでコピぺするだけで使えます。
Gridレイアウトを学習するのにとても役立つ便利なWebサービスです。
コメント