F21▸L201▸framer-motion

Bento Grid

便當盒網格

難度 ★★★★★標籤 layout · grid · bento3 min read

效果簡述

大小不一的卡片組成的網格，像便當盒。Apple、Linear、Magic UI 都愛這版型。靠 grid-cols-N + col-span / row-span 達成，配合 hover lift + 進場 stagger 就很有靈魂。

速度

Turbopack 預設

型別

TS 全 cover

部署

推 main 即上線

邊緣

全球低延遲

SDK 內建

▸ 預設|2×3, 不等高

Claude Code Prompt

💬 Claude Code Prompt

參考：L201 bento grid
技術：Tailwind grid + Framer Motion 進場

具體行為:
- grid grid-cols-3 auto-rows-[80px] gap-3
- 每格自己決定 col-span / row-span
- motion 進場用 stagger delay i*0.06
- hover whileHover y: -3 + shadow

限制：
- 行動裝置 col-3 太擠，改 col-2
- 一頁 1 個 bento dosage（多了搶焦點）
- 卡片內容對齊：用 flex flex-col justify-end，標題在底

完整程式碼

BentoGrid.tsx

'use client'

import { motion } from 'framer-motion'

const items = [
{ title: '速度', desc: 'Turbopack 預設', span: 'col-span-2 row-span-2' },
{ title: '型別', desc: 'TS 全 cover', span: 'col-span-1 row-span-1' },
// ...
]

export function BentoGrid() {
return (
  <div className="grid auto-rows-[80px] grid-cols-3 gap-3">
    {items.map((it, i) => (
      <motion.div
        key={it.title}
        initial={{ opacity: 0, y: 14 }}
        whileInView={{ opacity: 1, y: 0 }}
        whileHover={{ y: -3 }}
        transition={{ duration: 0.4, delay: i * 0.06 }}
        viewport={{ once: true }}
        className={`${it.span} rounded-xl border p-4`}
      >
        {it.title}
      </motion.div>
    ))}
  </div>
)
}

何時用

✅ Feature 區（產品/服務的多面向展示）
✅ Landing page 中段
✅ 作品集首屏

何時別用

❌ 同等重要的 5+ 項目（用普通 grid 比較公平）
❌ 內容差異很小（bento 強調差異化）
❌ 行動裝置主要受眾（要重做版型）

我踩過的坑

auto-rows 不設高度全擠：必須 auto-rows-[80px] 或固定 row 高度， span 才有意義。
行動裝置會壞：col-3 在窄螢幕擠成一團。md:grid-cols-3 + 預設 grid-cols-2。
內容對齊不一致：每格內容長短不一，用 flex flex-col justify-end 把重點都對在底邊。

效果簡述

Claude Code Prompt

完整程式碼

何時用

何時別用

我踩過的坑

相關效果

搜尋