【CssGrid】ジェネレーターで簡単に作れるグリッドレイアウトの作成方法

グリッドレイアウト CSS

以前からやってみたかったけど、いまいちよく分からなくて放置していたグリッドレイアウトが、他の調べ物をしていたら簡単に作成できるジェネレーターがあったのでメモ。

CSS Grid Generator

とにかく簡単!

横のマスと縦のマスの数と余白を入力して、作りたいレイアウトをマウスでビーっと引っ張るだけ!

画像を配置して、テキストも上に乗せたサンプルも作ってみました。

DEMO

パソコンでもスマートフォンでも綺麗に表示できるので、イメージ重視でちょっと作りたいときにおすすめです!!

HTML

 

CSS

コードはたったこれだけ!!

DEMO用に作った、画像やテキストを配置したコードはこちら。

HTML

CSS

こんな簡単にグリッドレイアウトが作れるとは。

コメント