黑色間距

仔細看首頁，你會發現每個格子之間有細細的黑線。那不是畫在格子上的 border——而是間距，透出背後黑色背景。

看懂這個技巧後，你就能在任何地方重現：深色画布上的浅色格子，只靠 spacing 分隔。

一個 token 控制全部

整個系統掛在 globals.css 裡的一個 CSS 自訂屬性：

@theme {
--spacing-bento-gap: 8px;
}

@media (min-width: 768px) {
:root {
  --spacing-bento-gap: 16px;
}
}

Tailwind v4 會把它對應成 gap-bento-gap、p-bento-gap 等工具類。改一次變數，所有 grid、padding 和輪播裝飾都會一起更新。

網格如何運作

home-bento.tsx 裡的首頁 bento 疊了三層：

1. 外殼 — bg-black p-bento-gap 包住整個 grid，padding 形成外框黑邊。
2. 主 grid — 12 欄布局加上 gap-bento-gap bg-black。gap 區域透明，黑色背景從縫隙露出。
3. 格子 — 每個 tile 用 bg-bento-bg（暖色 off-white）。只有格子是浅色，其間一律是黑。

作者／社群區塊是巢狀子 grid，同樣用 gap-bento-gap bg-black，內外間距完全一致。

image-carousel.tsx 的輪播按鈕也重用這個 token——border 寬度設為 var(--spacing-bento-gap)，控制元件與 grid 線對齊。

RWD 排序

手機版 grid 收成單欄。格子用 Tailwind order-* 重新排序，閱讀動線更合理（CTA、主圖落在適當位置），間距 token 不變。

桌面版（md:grid-cols-12）則是嚴格的 50/50 分割：每列 6 + 6 欄，以 col-span-* 和 row-start-* 定位。

動手調整間距

拖曳滑桿或點 preset，感受 gap 大小如何改變 bento 質感：

接下來

回到首頁並縮放瀏覽器——觀察間距在斷點處從 8px 跳到 16px。想了解完整技術堆疊，請讀打造這本日誌。