TailwindCSS 常見版面模式：Holy Grail、Sticky Footer、置中與卡片網格 | TailwindCSS 完整教學

版面章走到這裡，你手上已經集滿了 Flexbox、Grid、定位、間距與尺寸五套工具。這一篇不再教新 utility，而是把它們串成真正能用的版面骨架——垂直水平置中、Sticky Footer 黏底頁尾、Holy Grail（三欄聖杯）、後台 Sidebar 版面、響應式卡片網格與 Media Object。每一種都附上可直接貼進頁面執行的 TailwindCSS v4 範例，並清楚說明何時該用 flex、何時該用 grid，讓你從「認得每顆工具」躍升到「一眼就知道該用哪套組合」。這是 TailwindCSS 完整教學 系列的第十四篇，也是版面章（TW-3）的收尾。

前言

前面幾篇我們把版面工具一顆一顆拆開來看：Flexbox 管一維排列、Grid 管二維網格、定位管層疊、間距管留白、上一篇 《尺寸系統》 管大小。但真實專案裡，你面對的從來不是「請用一下 flex-1」這種單點需求，而是「幫我做一個後台管理介面」、「首頁要一個置中的英雄區」、「文章列表要響應式卡片」——這些都是由多顆工具組合而成的版面模式（Layout Patterns）。

用一個現實世界的類比來理解「模式」的價值：想像你在學做菜。 認得鹽、糖、醬油、火候（單一工具）是第一步，但真正讓你能上桌的，是「糖醋」、「紅燒」、「清蒸」這些經過驗證的組合配方——你不用每次都從零試味，看到食材就知道套哪個配方。版面模式就是前端的「配方」：聖杯佈局、Sticky Footer、卡片網格，都是無數專案反覆打磨出來的標準解。記住這些模式，你面對新頁面時就能直接套用骨架，把精力留給真正獨特的部分。

而 TailwindCSS 讓這些配方特別好實現——因為所有模式都能用純 class 組合出來，不必寫一行自訂 CSS。你唯一要做的判斷，是每個場景該用 flex 還是 grid。這也是本篇最核心的一條主線：一維排列（一列或一行）用 Flexbox，二維對齊（同時管列與行）用 Grid，頁面整體骨架則常常是「外層 flex、內層 grid」各取所長。

本篇你將學到：

• 置中三兄弟：垂直水平置中的 flex（flex items-center justify-center）與 grid（grid place-items-center）兩種寫法，以及各自的適用時機
• Sticky Footer：用 flex flex-col min-h-screen + flex-1 讓頁尾內容少時黏底、內容多時被推下的一勞永逸解法
• Holy Grail 三欄聖杯佈局：外層 flex 撐骨架、內層 grid-cols-[16rem_1fr_20rem] 定義三欄，並響應式收合
• Sidebar 後台版面：固定側邊欄 + 可獨立捲動主內容，min-w-0 防溢出的實戰
• 響應式卡片網格與 Media Object：grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 的響應式網格，以及圖文並排的 Media Object 經典模式

本系列以 TailwindCSS v4 為預設版本，範例皆可直接執行。

核心概念

版型選型：一句話決定 flex 還是 grid

面對任何版面，先問自己一個問題：「我要排的是一維，還是二維？」 這一句就能決定八成的選型。下面這張表是整篇文章的選型地圖：

有幾個實務直覺值得記住。導覽列、按鈕群、頭像加名字這種「排成一條線」的東西，一律用 Flexbox——因為它們是一維的，你只需要沿著一條軸排列與對齊。卡片網格、聖杯三欄、儀表板方格這種「行與列都要對齊」的東西，用 Grid——因為它天生為二維而生，欄寬與列高能一次宣告清楚。而整個頁面的外框（header 在上、footer 在下、中間主體撐開），最順的做法是外層用 flex flex-col 垂直堆疊、內層需要多欄時再用 grid，這就是聖杯佈局的標準骨架。

三個貫穿全篇的關鍵護身符

在進入範例前，先認識三顆會反覆出現、少了就出 bug 的關鍵 class：

這三顆是本篇所有模式的共同地基。min-h-dvh（動態視口高度，上一篇《尺寸系統》詳談過）比 min-h-screen（100vh）在手機上更精準，做全螢幕版面時優先用它。flex-1 是 Sticky Footer 與側邊欄佈局的靈魂，讓某一區「彈性撐開剩餘空間」。min-w-0 則是 flex 佈局的防溢出保險——Flexbox 子項預設 min-width: auto，遇到長字串或大表格會撐破容器，加上 min-w-0 把最小寬度重置為 0 才能正常收縮。記住這三顆，接下來的模式就都是水到渠成的組合。

實作範例

理論看完，我們用六個高頻模式把工具串起來。以下都是完整的 HTML + Tailwind，可直接貼進頁面觀察效果。

模式一：垂直水平置中（flex vs grid 兩種寫法）

最基礎也最常被問的模式：把一個元素放到容器正中央。登入框、載入動畫、404 錯誤頁都會用到。Tailwind 有兩種等效寫法，關鍵前提是外層必須有明確高度：

<!-- 寫法 A：Flexbox，最通用、語義最直覺 -->
<div class="flex min-h-dvh items-center justify-center bg-gray-100 p-4">
  <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-lg">
    <h2 class="mb-2 text-xl font-bold text-gray-900">歡迎回來</h2>
    <p class="text-sm text-gray-500">請登入你的帳號</p>
  </div>
</div>

<!-- 寫法 B：Grid，place-items-center 一顆搞定雙軸 -->
<div class="grid min-h-dvh place-items-center bg-gray-100 p-4">
  <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-lg">
    <h2 class="mb-2 text-xl font-bold text-gray-900">歡迎回來</h2>
    <p class="text-sm text-gray-500">請登入你的帳號</p>
  </div>
</div>

兩種寫法的差別只在置中那幾顆 class。Flex 寫法用 items-center（交叉軸置中，這裡管垂直）加 justify-center（主軸置中，這裡管水平）——語義清楚、相容性最廣，是最通用的做法，單一元素置中我通常優先選它。Grid 寫法用 place-items-center，它是 align-items 與 justify-items 的雙軸簡寫，一顆 class 同時搞定水平垂直，寫起來最精簡。兩者共通的關鍵是 min-h-dvh——沒有它，容器高度只等於內容高度，「垂直置中」就看不出效果，這是新手最常忽略的一步。選型上：置中單一元素兩者皆可；若容器裡要擺多個網格化項目、每個都要在自己格子裡置中，grid 更順手。

模式二：Sticky Footer（頁尾黏底）

Sticky Footer 要解決的問題是：當頁面內容很少時，頁尾應該黏在視窗底部（而非浮在半空中）；當內容很多時，頁尾又要乖乖被推到內容下方。這是 Flexbox 的經典勝場，三顆 class 一勞永逸：

<!-- Sticky Footer：內容少時黏底、內容多時被推下 -->
<div class="flex min-h-dvh flex-col bg-gray-50">

  <!-- 頁首：固定高度 -->
  <header class="flex h-16 items-center border-b border-gray-200 bg-white px-6">
    <span class="text-xl font-bold text-gray-900">Logo</span>
  </header>

  <!-- 主內容：flex-1 吃掉所有剩餘垂直空間，是黏底的關鍵 -->
  <main class="flex-1 px-6 py-8">
    <h1 class="text-2xl font-bold text-gray-900">頁面主要內容</h1>
    <p class="mt-4 text-gray-600">即使這裡內容很少，頁尾仍會被頂到視窗底部。</p>
  </main>

  <!-- 頁尾：內容少時黏底、內容多時被自然推下 -->
  <footer class="bg-gray-900 py-8 text-center text-sm text-gray-400">
    © 2026 版權所有
  </footer>

</div>

這套組合為什麼用 flex 而非 grid？因為頁面外框是「header／main／footer 由上到下的一維垂直排列」，正是 Flexbox 的主場。拆解三顆關鍵 class：外層 flex flex-col 讓三塊垂直堆疊、min-h-dvh 保證整頁至少填滿一個視窗高；真正的靈魂是主內容的 flex-1——它讓 main 吃掉除 header／footer 外的所有剩餘垂直空間。於是內容少時，flex-1 膨脹把 footer 頂到視窗底部；內容多時，main 自然撐高、footer 被推到下方。兩種情境都正確，且完全不需要 JS 或絕對定位。切記別用 fixed bottom-0 把 footer 釘在底部——那在內容變長時會蓋住內容。

模式三：Holy Grail 三欄聖杯佈局

聖杯佈局（Holy Grail）是頁面級佈局的經典難題：頁首在上、頁尾在下、中間三欄（左導覽、主內容、右邊欄），且中間主內容要彈性撐開、左右欄固定寬。v4 用「外層 flex 撐骨架、內層 grid 排三欄」最漂亮：

<!-- Holy Grail：外層 flex 垂直骨架，主體區 grid 三欄 -->
<div class="flex min-h-dvh flex-col bg-gray-50">

  <!-- 頁首：橫跨全寬 -->
  <header class="sticky top-0 z-50 flex h-16 items-center justify-between
                 border-b border-gray-200 bg-white px-6 shadow-sm">
    <span class="text-xl font-bold text-gray-900">Logo</span>
    <nav class="hidden gap-6 md:flex">
      <a href="#" class="text-sm text-gray-600 hover:text-gray-900">首頁</a>
      <a href="#" class="text-sm text-gray-600 hover:text-gray-900">關於</a>
    </nav>
  </header>

  <!-- 三欄主體：grid 定義「左固定 / 中彈性 / 右固定」，flex-1 撐開高度 -->
  <div class="grid flex-1 grid-cols-1
              lg:grid-cols-[16rem_1fr]
              xl:grid-cols-[16rem_1fr_20rem]">

    <!-- 左導覽欄：中螢幕以下隱藏 -->
    <nav class="hidden border-r border-gray-200 bg-white p-4 lg:block">
      <a href="#" class="block rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900">文章列表</a>
      <a href="#" class="mt-1 block rounded-lg px-3 py-2 text-sm text-gray-600 hover:bg-gray-50">分類管理</a>
    </nav>

    <!-- 主內容：min-w-0 防長內容溢出 -->
    <main class="min-w-0 p-6">
      <h1 class="mb-4 text-2xl font-bold text-gray-900">主要內容區</h1>
      <p class="text-gray-600">中間欄用 1fr 吃掉剩餘寬度，左右欄則是固定像素寬。</p>
    </main>

    <!-- 右邊欄：大螢幕才顯示 -->
    <aside class="hidden border-l border-gray-200 bg-white p-4 xl:block">
      <h3 class="mb-3 font-semibold text-gray-900">相關連結</h3>
      <ul class="space-y-2 text-sm text-gray-600">
        <li><a href="#" class="hover:text-cyan-600">連結一</a></li>
        <li><a href="#" class="hover:text-cyan-600">連結二</a></li>
      </ul>
    </aside>

  </div>

  <!-- 頁尾：橫跨全寬 -->
  <footer class="bg-gray-900 py-8 text-center text-sm text-gray-400">© 2026 版權所有</footer>

</div>

這個模式漂亮在兩層各用對工具。外層 flex flex-col min-h-dvh 負責「header／主體／footer 垂直骨架」，主體加 flex-1 撐開高度（順便解決了 Sticky Footer）——這是一維垂直排列，用 flex。而中間三欄主體用 grid，因為欄寬集中在 grid-cols-[16rem_1fr_20rem] 這一句就講清楚了：左欄 16rem 固定、中欄 1fr 吃掉剩餘、右欄 20rem 固定。這種「混合固定與彈性欄軌」正是 grid 的拿手好戲，用任意值一次寫定，改欄寬只動一處，比三個 flex 子項各設寬度好讀太多。響應式收合也很自然：手機 grid-cols-1 單欄堆疊，lg:grid-cols-[16rem_1fr] 中螢幕先出現左欄，xl 才補上右欄。主內容記得加 min-w-0 防止長內容撐破網格。

模式四:Sidebar 後台版面（固定側欄 + 可捲動主內容）

後台管理介面最常見的骨架：左側固定寬側邊欄、右側主內容，且兩區能各自獨立捲動（側欄捲側欄、主內容捲主內容，互不干擾）。這用 Flexbox 做最直接：

<!-- 後台佈局：固定側欄 + 可獨立捲動主內容 -->
<div class="flex h-dvh overflow-hidden bg-gray-100">

  <!-- 側邊欄：固定 256px、不縮放、獨立捲動 -->
  <aside class="flex w-64 flex-none flex-col overflow-y-auto bg-gray-900 text-gray-100">
    <div class="flex h-16 items-center border-b border-gray-700 px-6">
      <span class="text-lg font-bold text-white">Admin</span>
    </div>
    <nav class="flex-1 space-y-1 p-4">
      <a href="#" class="block rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white">儀表板</a>
      <a href="#" class="block rounded-lg px-3 py-2 text-sm text-gray-400 hover:bg-gray-800 hover:text-white">用戶管理</a>
      <a href="#" class="block rounded-lg px-3 py-2 text-sm text-gray-400 hover:bg-gray-800 hover:text-white">系統設定</a>
    </nav>
  </aside>

  <!-- 右側：頂列固定 + 主內容獨立捲動 -->
  <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
    <header class="flex h-16 flex-none items-center border-b border-gray-200 bg-white px-6">
      <h1 class="text-lg font-semibold text-gray-900">儀表板</h1>
    </header>
    <main class="flex-1 overflow-y-auto p-6">
      <p class="text-gray-600">主要內容區域，這裡的內容超長時只有本區會捲動。</p>
    </main>
  </div>

</div>

這個模式用 flex 的理由和聖杯一樣：它本質是「側欄 + 主區」的水平一維排列，加上右側內部「頂列 + 主內容」的垂直一維排列，兩層都是一維，Flexbox 最順。幾顆 class 的分工要看懂：最外層 h-dvh overflow-hidden 把整個 App 鎖在一個視窗高、禁止整頁捲動；側欄 w-64 flex-none 固定 256px 且不被壓縮，加 overflow-y-auto 讓它自己捲；右側容器 flex-1 吃掉剩餘寬度、overflow-hidden 配合內部的 main 用 overflow-y-auto 達成主內容獨立捲動。特別留意右側容器的 min-w-0——少了它，主內容裡的寬表格或長字串會撐破 flex 子項、把側欄擠變形，這顆是後台佈局的常備護身符。

模式五:響應式卡片網格

文章列表、商品牆、相簿——凡是「一堆同型項目要排成網格」，就是 Grid 的主場。響應式卡片網格的精髓是用斷點前綴切換欄數，手機一欄、平板兩欄、桌機三欄：

<!-- 響應式卡片網格：手機 1 欄、平板 2 欄、桌機 3 欄 -->
<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
  <h2 class="mb-8 text-2xl font-bold text-gray-900">精選文章</h2>

  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">

    <!-- 卡片（實務上用迴圈渲染多張） -->
    <article class="group flex flex-col overflow-hidden rounded-2xl border border-gray-200
                    bg-white shadow-sm transition hover:shadow-md">
      <div class="aspect-video overflow-hidden bg-gray-100">
        <img src="/thumbnail.jpg" alt="封面"
             class="h-full w-full object-cover transition duration-300 group-hover:scale-105">
      </div>
      <div class="flex flex-1 flex-col p-5">
        <span class="mb-3 w-fit rounded-full bg-cyan-50 px-2 py-0.5 text-xs font-medium text-cyan-700">教學</span>
        <h3 class="mb-2 font-semibold leading-snug text-gray-900 line-clamp-2">
          TailwindCSS v4 版型實戰指南
        </h3>
        <p class="text-sm leading-relaxed text-gray-500 line-clamp-3">
          把版型工具串成真正能用的骨架，從置中到聖杯佈局一次搞懂。
        </p>
        <!-- mt-auto 把作者列推到卡片底部，讓不同高度的卡片底部對齊 -->
        <div class="mt-auto flex items-center gap-3 border-t border-gray-100 pt-4">
          <div class="size-7 flex-none rounded-full bg-gray-200"></div>
          <p class="text-xs font-medium text-gray-900">BenzHub</p>
        </div>
      </div>
    </article>

  </div>
</section>

用 grid 而非 flex 的理由很關鍵：卡片牆是二維的（行與列都要對齊），grid-cols-3 能保證每張卡片等寬、每列高度自動對齊，比 flex flex-wrap 手動算寬度乾淨太多。響應式靠 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 三段切換欄數，gap-6 統一格與格的間隔。這裡藏了一個讓卡片「賣相整齊」的小技巧：卡片內部用 flex flex-col，再讓底部的作者列加 mt-auto——這樣即使各卡片文字長短不一，作者列都會被推到卡片底部對齊，不會參差不齊。這正是「外層 grid 排網格、卡片內層 flex 做垂直對齊」的組合應用。

模式六:Media Object（圖文並排）

Media Object 是 CSS 界的元老級模式：左邊一張固定尺寸的圖／圖示，右邊是彈性寬度的文字，文字長了會自動換行、但絕不跑到圖底下。留言、通知、清單項目全靠它。這是 Flexbox 的教科書級範例：

<!-- Media Object：左圖固定、右文彈性換行 -->
<div class="flex items-start gap-4 rounded-xl border border-gray-200 bg-white p-4">
  <!-- 媒體：固定尺寸、不縮放 -->
  <img src="/avatar.jpg" alt="頭像" class="size-12 flex-none rounded-full object-cover">

  <!-- 內文：吃掉剩餘寬度，min-w-0 讓長字換行而非溢出 -->
  <div class="min-w-0 flex-1">
    <div class="flex items-center justify-between gap-2">
      <p class="font-semibold text-gray-900">王小明</p>
      <time class="flex-none text-xs text-gray-400">2 分鐘前</time>
    </div>
    <p class="mt-1 text-sm leading-relaxed text-gray-600">
      這是一則留言，文字很長時會自動在文字區內換行，永遠不會跑到左側頭像的下方。
    </p>
  </div>
</div>

Media Object 用 flex 是因為它是「圖 + 文」的一維水平排列。三個關鍵點：外層 flex items-start gap-4 讓圖與文並排、頂端對齊、間隔 16px；媒體用 size-12 flex-none 固定 48px 正方形且不被壓縮（flex-none 確保文字再多也不會擠扁圖片）；內文用 flex-1 min-w-0 吃掉剩餘寬度——這裡的 min-w-0 是靈魂，少了它長字串會把文字區撐爆、破壞排版，加上它文字才會乖乖在自己的區域內換行。這個模式看似簡單，卻是清單、留言、通知、聊天訊息等無數 UI 的底層骨架，值得刻進肌肉記憶。

常見錯誤與最佳實踐

五個最容易踩的版面坑

坑一：全螢幕置中忘了給容器高度。 寫了 flex items-center justify-center 卻發現元素只在頂部、沒有垂直置中——因為容器高度只等於內容高度，「垂直置中」自然看不出來。**根治法：加 min-h-dvh（或 min-h-screen）**給置中容器一個明確高度。

<!-- ❌ 容器沒高度，垂直置中無效 -->
<div class="flex items-center justify-center">...</div>

<!-- ✅ 有明確高度，垂直置中生效 -->
<div class="flex min-h-dvh items-center justify-center">...</div>

坑二：Sticky Footer 用 fixed bottom-0 釘死。 用固定定位把 footer 釘在視窗底部，內容一變長就會蓋住內容。根治法：改用 flex flex-col min-h-screen + 主內容 flex-1，讓彈性的 main 撐開版面、把 footer 自然推下。

<!-- ❌ fixed 會蓋住變長的內容 -->
<footer class="fixed bottom-0 w-full">...</footer>

<!-- ✅ flex-1 撐開 main，footer 自然黏底或被推下 -->
<div class="flex min-h-dvh flex-col">
  <main class="flex-1">...</main>
  <footer>...</footer>
</div>

坑三：flex 佈局長內容撐破版面。 側邊欄佈局或 Media Object 裡，長字串、寬表格把 flex 子項撐爆、擠垮旁邊的欄。原因是 Flexbox 子項預設 min-width: auto。根治法：在彈性主內容區加 min-w-0，允許它收縮到必要寬度、觸發正常換行或捲動。

<!-- ❌ 主內容長字串撐破側欄 -->
<div class="flex">
  <aside class="w-64 flex-none">...</aside>
  <main class="flex-1">很長的內容...</main>
</div>

<!-- ✅ min-w-0 讓主內容可收縮 -->
<div class="flex">
  <aside class="w-64 flex-none">...</aside>
  <main class="min-w-0 flex-1">很長的內容...</main>
</div>

坑四：該用 grid 卻硬用 flex 排網格。 用 flex flex-wrap 排卡片牆，得手動算每張卡的百分比寬度（w-1/3 還要扣掉 gap），換欄數時一團亂，且各列高度不會自動對齊。根治法：二維網格一律用 grid，grid-cols-3 gap-6 一句話搞定等寬與對齊，響應式只要切 sm:grid-cols-2 lg:grid-cols-3。

坑五:Sticky 定位莫名失效。 明明寫了 sticky top-0 卻不黏。最常見兩個原因：一是某層父元素有 overflow-hidden／overflow-auto（會截斷 sticky 的作用範圍），二是父容器高度不足以讓元素有捲動空間。根治法：檢查並移除祖先層多餘的 overflow 限制，確認 sticky 元素的捲動容器有足夠高度。

版面模式最佳實踐清單

• 先問一維還是二維：一維排列（導覽、按鈕群、圖文並排）用 Flexbox，二維對齊（卡片牆、聖杯三欄、方格儀表板）用 Grid，這一句解決八成選型。
• 頁面外框「外層 flex、內層 grid」：flex flex-col min-h-dvh 撐垂直骨架，需要多欄的主體再用 grid，是聖杯與後台版面的標準組合。
• 全螢幕版面用 min-h-dvh：置中、Sticky Footer、聖杯佈局都需要容器有明確高度，min-h-dvh 比 min-h-screen 在手機更精準。
• 彈性主內容必加 min-w-0：這是 flex 佈局防止長內容溢出的常備護身符，側邊欄與 Media Object 都少不了。
• 固定不縮放的區塊用 flex-none：側邊欄、Media Object 的圖片要固定尺寸時，flex-none 確保它不被旁邊的長內容擠扁。
• 卡片內層用 flex flex-col + mt-auto：讓不同高度的卡片底部元素（作者、按鈕）對齊，網格賣相立刻整齊。
• 響應式靠斷點切欄數：grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 是卡片網格的黃金公式，側欄則用 hidden lg:block 響應式收合。

小結

這是 TailwindCSS 完整教學 系列的第十四篇。上一篇 《尺寸系統》 我們把「大小的分寸」講透——w-*／h-* 控寬高、min/max 設界線、size-* 管正方形、min-h-dvh 挑對視口單位，讓每個元素的尺寸都落在同一套刻度上。那一篇教你「單顆工具」；而這一篇把 Flexbox、Grid、定位、間距、尺寸五套工具組裝成真實專案天天在用的版面骨架——你已經從「認得每顆 utility」躍升到「一眼就知道該套哪個配方」。回顧幾個重點：

• 選型一句話：一維排列用 Flexbox、二維對齊用 Grid、頁面外框「外層 flex、內層 grid」各取所長。
• 置中兩寫法：flex items-center justify-center（最通用）或 grid place-items-center（最精簡），前提是容器要有 min-h-dvh。
• Sticky Footer 一勞永逸：flex flex-col min-h-dvh + 主內容 flex-1，內容少黏底、內容多推下，不需 JS。
• 聖杯佈局漂亮寫法：外層 flex 撐骨架、主體 grid-cols-[16rem_1fr_20rem] 排三欄，響應式收合欄數。
• 三顆護身符：min-h-dvh（給高度）、flex-1（撐空間）、min-w-0（防溢出）貫穿所有模式，缺一就出 bug。

至此，版面與定位章（TW-3） 正式收尾——從 Flexbox、Grid、定位、間距、尺寸到本篇的常見版面模式，你已經能精準搭建任何頁面的骨架。接下來我們將翻開 視覺樣式章（TW-4） 的第一頁：下一篇 《色彩系統》 會帶你走進 Tailwind 最迷人的部分——text-*／bg-*／border-* 的顏色 utility、v4 的 OKLCH 調色盤、透明度速記（bg-cyan-600/80），以及如何用 @theme 打造專屬品牌色。版面搭好了，是時候替它上色了。