Bento 网格卡片布局（数据看板式 CSS Grid 源码）

效果演示（真实可交互）

下方是一个 4 列 3 行的 Bento 网格：大卡片占据四格、中卡片占据两格，小卡片各占一格，悬停均有上浮反馈。缩放窗口可看到移动端自动降级为两列布局。

完整代码

HTML 结构：六块内容各自独立，通过 grid-area 命名归位：

<div class="bento">
  <div class="b-tile t-1">…大卡片…</div>
  <div class="b-tile t-2">…小卡片…</div>
  <div class="b-tile t-3">…小卡片…</div>
  <div class="b-tile t-4">…小卡片…</div>
  <div class="b-tile t-5">…小卡片…</div>
  <div class="b-tile t-6">…通栏卡片…</div>
</div>

核心 CSS：用 grid-template-areas 直观定义拼贴形状：

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 128px);
  grid-template-areas:
    "a a b c"
    "a a d e"
    "f f f f";
  gap: 14px;
}

/* 命名区域 */
.t-1 { grid-area: a; }   /* 2x2 大卡片 */
.t-2 { grid-area: b; }
.t-3 { grid-area: c; }
.t-4 { grid-area: d; }
.t-5 { grid-area: e; }
.t-6 { grid-area: f; }   /* 通栏横幅 */

/* 移动端降级为两列 */
@media (max-width: 640px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 120px);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f f";
  }
}

.b-tile {
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .3s ease, box-shadow .3s ease;
}
.b-tile:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }

参数说明

兼容性与性能

• 纯 CSS Grid 实现，Chrome 57+ / Firefox 52+ / Safari 10.1+ 均支持 grid-template-areas
• 布局由浏览器网格算法完成，零 JS 零依赖，渲染性能极佳
• 悬停只做 transform 动画，卡片数量多也不卡顿
• 建议内容较重的区块（图表、长文本）放在大卡片区域，保证信息密度均衡

常见问题

Q: 想让某张卡片横跨两列怎么改？ 在 grid-template-areas 中让同一行出现两个相同字母即可，例如把 "a a b c" 改成 "a a b b" 让 c 和 b 合并。

Q: 卡片内容高度不一时会乱吗？ 不会，grid-template-rows 固定了行高，内容超长时卡片内部需要自行处理滚动或截断。

Q: 能做成瀑布流吗？ Bento 是规整网格，瀑布流请使用 columns 多列布局或 JS 排版方案，两者思路不同。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。