CSS Gridで実装、弁当グリッドのレイアウトを確認しながらCSSを生成できる無料ツール -Bento Grid Builder

弁当グリッドは見栄えがいいレイアウトですが、HTMLとCSSで実装するとすこし難しいかもしれません。完成レイアウトを調整しながら、HTMLとCSSのコード（Tailwind CSS用も）を生成してくれる無料ツールを紹介します。

弁当グリッドとは、日本の弁当箱のインスパイアされたグリッドです。異なるサイズの長方形に分割された、非常に整頓されたUIパターンで、AppleのiOSウィジェットやランディングページにも採用されています。ダッシュボードや複雑なデータを整理できる優れたレイアウトです。

面倒な実装はAIにお願いすれば、と思うかもしれませんが、この弁当グリッドを言葉で説明するのはかなり難しいと思います。

Interactive Bento Grid Builder

Interactive Bento Grid Builderは文字通り、弁当グリッドのレイアウトを確認しながらコードを生成できる無料ツールです。生成されるコードは、Tailwind CSS用とHTML/CSSの2種類です。

使い方は簡単、登録やログインなど面倒なことは一切不要です。
下記ページにアクセスすると、基本の弁当グリッドがある状態からカスタマイズできます。

Interactive Bento Grid Builder

「1. Global Grid Container」では、グリッドのコンテナやギャップを変更・追加できます。

「2. Active Card」では選択したカードを変更できます。Card 3を選択してみました。

Card 3を選択

Card 3の「Row Span」を変更して、高さを1にしてみました。

Card 3の高さを1に変更

同様に、Card 4を選択して、幅を広げてみます。

Card 4を選択

Card 4の「Column Span」を2に変更してみました。

Card 4の幅を3に変更

カードを追加したいときは、「Add Card」で何枚でも追加できます。

カードの追加

もちろん、追加したカードの幅や高さを変更することができます。

追加したカードの幅を変更

「4. Output Code」では、弁当グリッドを実装するためのコードが生成されるので、コピペで利用できます。コードは、Tailwind CSS用とHTML/CSSの2種類。

4. Output Code

下記は、HTML/CSSのコードです。

CSSは、下記の通り。
弁当グリッドは、CSS Gridで実装されています。CSS Gridは弁当グリッドのように2つの次元にまたがるレイアウトを実装するのに最適です。