CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator

最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。

使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。

CSS Grid Generator

Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。

CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。

CSS Grid Generatorの使い方は、簡単です。
登録など面倒なことは一切不要、まずは、下記ページにアクセスします。

CSS Grid Generator

CSS Grid Generatorでレイアウトを作成する手順は、下記の通り。

1. グリッドの列・行・ギャップの数を設定する。
2. ＋記号をクリックして、グリッドに要素を追加する。
3. 追加した要素の右下隅をドラッグして、サイズを変更する。
4. 要素をドラッグアンドドロップして、配置を設定する。
5. 生成されたHTMLとCSSをコピペする。

まずは、初期画面。

初期画面

上部で、グリッドの列・行・ギャップの数を設定します。

グリッドの列・行・ギャップの数を設定

列を3、行を3、ギャップを8に設定しました。

列を3、行を3、ギャップを8に設定

あとは、作成したグリッドに要素を設定します。最初に、＋記号をクリックして、グリッドに要素を追加します。追加した要素の右下隅をドラッグすると、サイズを変更できます。

グリッドに要素を設定

HTMLとCSSをリアルタイムに生成されるので、それをコピペするだけです。

生成されたHTMLとCSS

生成されたHTMLとCSSは、下記の通り。

HTMLもCSSもシンプルで最小限なので、使い勝手がよいと思います。