バイブコーダーのための名称辞典

ベントグリッドとは

大きさの異なるタイルを弁当箱のように組み合わせて並べるグリッドレイアウト。

概要

大きさの異なる四角いタイルを、弁当箱のおかずを詰めるように組み合わせて並べるレイアウトです。すべて 同じ大きさで並べるカードグリッドと違い、見せたい情報の重要度に応じてタイルの大きさに差を付けられるため、 トップページの機能紹介やダッシュボードでよく使われます。CSS の grid-template-areas を使うと、 どのタイルがどこに配置されるかを名前で分かりやすく指定できます。

別名

表記ゆれ：ベントグリッド、bento grid、弁当箱レイアウト

英語表記の「bento grid」がそのままカタカナになった呼び方です。見た目の由来から「弁当箱レイアウト」と 呼ばれることもあります。

AI への伝え方

「ベントグリッドで並べて」で通じます。どのタイルを大きく見せたいか（例えば一番伝えたい機能を 2x2 の 大きさにする、など）を伝えると仕上がりの印象が伝わりやすくなります。grid-template-areas で組む場合、 各タイルの範囲は必ず長方形になるように指定する必要がある点に注意してください。

似たパーツとの違い

すべてのマスを同じ大きさにそろえる「カードグリッド」に対し、ベントグリッドは大小のタイルを意図的に 組み合わせる点が異なります。高さの違うカードをレンガ状に敷き詰める「メイソンリーレイアウト」とも 似ていますが、メイソンリーはカードの大きさがコンテンツ量によって自然に決まるのに対し、ベントグリッドは タイルの大きさをあらかじめレイアウトとして意図的に設計する点が異なります。

デモ

A
B
C
D
E
F

コード

HTML 
<div class="bento-grid-demo">
  <div class="bento-grid-demo__tile bento-grid-demo__tile--a">A</div>
  <div class="bento-grid-demo__tile bento-grid-demo__tile--b">B</div>
  <div class="bento-grid-demo__tile bento-grid-demo__tile--c">C</div>
  <div class="bento-grid-demo__tile bento-grid-demo__tile--d">D</div>
  <div class="bento-grid-demo__tile bento-grid-demo__tile--e">E</div>
  <div class="bento-grid-demo__tile bento-grid-demo__tile--f">F</div>
</div>
CSS 
.bento-grid-demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 64px);
  grid-template-areas:
    "a a b c"
    "a a b c"
    "d e e f";
  gap: 8px;
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
}

.bento-grid-demo__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.bento-grid-demo__tile--a {
  grid-area: a;
  background: #0017c1;
}

.bento-grid-demo__tile--b {
  grid-area: b;
  background: #333333;
}

.bento-grid-demo__tile--c {
  grid-area: c;
  background: #666666;
}

.bento-grid-demo__tile--d {
  grid-area: d;
  background: #b3b3b3;
  color: #333333;
}

.bento-grid-demo__tile--e {
  grid-area: e;
  background: #666666;
}

.bento-grid-demo__tile--f {
  grid-area: f;
  background: #333333;
}