やってみようマスにマウスを乗せたり、押したりしてみてください
デザインスタイルマイナー（知る人ぞ知る）
ベントーグリッド
Bento Grid
大きさの違う角丸の四角を、弁当箱の仕切りのようにきれいに組み合わせて並べるレイアウト。
別名弁当箱レイアウトベントレイアウトタイルレイアウト
どこで使われている？
- よく見かける場所
- Appleの製品紹介ページ、サービスの機能紹介、ポートフォリオ
- 使うとよい場面
- たくさんの特徴を、整理して1画面で見せたいとき
- 避けたい場面
- 順番に読んでほしい説明
補足Appleの製品紹介ページなどでよく使われるデザインの名前です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ベントーグリッド（Bento Grid）」を実装してください。 動き：角丸の四角いマスを縦横2〜3マス分の大きさの違いを付けて組み合わせ、すき間を一定にして長方形にぴったり収める。1つのマスに1つの特徴（数字・図・短い文）を入れる。 使う部品：CSS Grid（grid-column: span 2 など）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | CSS Grid（grid-column: span 2 など） |
|---|---|
| iPhoneアプリなら | Grid / LazyVGrid で自作 |
| Androidアプリなら | LazyVerticalGrid + GridItemSpan |
| Flutterなら | flutter_staggered_grid_view の StaggeredGrid |
| React Nativeなら | 自作 |