Bento 网格布局

概述

一种借鉴日式便当盒分区理念的 不对称网格布局，通过首卡跨列和渐变封面色实现视觉层次。

其核心特征是：

• CSS Grid 三列布局，首张卡片跨两列且更高，形成视觉焦点；
• 5 组预设渐变色按索引循环分配，无需图片即可区分不同卡片；
• 封面底部叠加渐变遮罩，自然过渡到内容区域；
• 配合 .animate-stagger 实现卡片交错入场动画。

核心思路

CSS Grid 三列布局，首张卡片跨两列且更高，形成不对称的 Bento 风格。

基础网格

<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
  {projects.map((project, index) => (
    <Card key={project.id} className={getBentoClass(index)}>
      ...
    </Card>
  ))}
</div>

首卡突出逻辑

function getBentoClass(index: number): string {
  return index === 0 ? "sm:col-span-2 sm:row-span-1" : ""
}

function getBentoHeight(index: number): string {
  return index === 0 ? "h-56 sm:h-64" : "h-52"
}

位置跨列高度第 0 张（首卡）col-span-2h-56 sm:h-64 (224-256px)其他col-span-1h-52 (208px)

渐变封面系统

5 组预设渐变色，按索引循环分配：

const COVER_GRADIENTS = [
  "from-emerald-500/20 to-teal-500/10",    /* 绿 */
  "from-amber-500/20 to-orange-500/10",     /* 橙 */
  "from-violet-500/20 to-purple-500/10",    /* 紫 */
  "from-rose-500/20 to-pink-500/10",        /* 粉 */
  "from-sky-500/20 to-cyan-500/10",         /* 蓝 */
]

// 使用
<div className={cn("bg-gradient-to-br", COVER_GRADIENTS[index % 5])} />

底部渐隐

封面底部叠加一个渐变遮罩，让内容区自然过渡：

<div className="absolute inset-0 bg-gradient-to-t from-card/80 to-transparent" />

交错入场

网格容器添加 .animate-stagger，所有卡片按 60ms 间隔依次 reveal 入场：

<div className="animate-stagger grid gap-5 sm:grid-cols-2 lg:grid-cols-3">

响应式断点

断点列数说明< sm (640px)1 列移动端单列sm (640px+)2 列平板双列，首卡跨 2lg (1024px+)3 列桌面三列，首卡跨 2

适用场景

• 项目列表、作品集展示
• 任何需要”首项突出”的网格布局
• 配合渐变封面色实现无图片的视觉区分

‍