CSS Grid 实战：用 Bento Grid 做不规则卡片布局

什么是 Bento Grid

Bento Box（便当盒）布局灵感来自日式便当盒的格子分区，每个格子大小不一但整体整齐。Apple 的 Keynote 和 Notion 官网都大量使用了这种布局。

核心 CSS

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

响应式处理

在移动端，全部改为 grid-template-columns: 1fr，所有卡片 grid-column: span 1，保证单列堆叠。

心得

Bento Grid 的关键在于内容优先级——重要的卡片跨更多列，次要的卡片缩小。不能为了好看而平均分配，要根据内容权重来设计。