網頁設計累積了許多反覆出現、被驗證有效的「模式」。認得這些模式，就不必每次都從零發明版面。本章整理幾個最常見的版面與導覽模式，並給出 CSS 實作。

經典版面骨架#

Holy Grail：頁首 / 側欄 / 主內容 / 頁尾#

最常見的後台與內容網站版面，用 Grid 幾行就能搭出來：

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.app > header {
  grid-area: header;
}
.app > nav {
  grid-area: sidebar;
}
.app > main {
  grid-area: main;
}
.app > footer {
  grid-area: footer;
}

/* 窄螢幕：側欄收到主內容上方，變單欄 */
@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

響應式卡片網格#

「列出一堆卡片，視窗寬就多欄、窄就少欄」是最常見的需求。一行 CSS 就能自適應，不需要寫任何 media query：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

auto-fit + minmax(240px, 1fr) 的意思是：「每欄最少 240px，能塞幾欄就塞幾欄，多的空間平均分配」。視窗縮小時欄數自動減少，這是現代 CSS 最實用的版面技巧之一。

Hero 與三欄賣點#

行銷頁常見的「大標題 Hero + 三個賣點」：

.hero {
  display: grid;
  place-items: center; /* 水平垂直都置中 */
  min-height: 60vh;
  text-align: center;
}
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

導覽模式#

水平導覽列（含 sticky）#

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0; /* 捲動時固定在頂端 */
  background: var(--color-bg, #fff);
}
.navbar .spacer {
  margin-left: auto;
} /* 把後面的項目推到最右 */

漢堡選單：優先用原生 <details>#

行動版常把選單收進漢堡按鈕。最輕量的做法是用 HTML 原生的 <details>，不需要任何 JavaScript：

<details class="menu">
  <summary>選單</summary>
  <nav>
    <a href="/">首頁</a>
    <a href="/about">關於</a>
  </nav>
</details>

Tabs（分頁切換）#

用語義化標籤與 ARIA 屬性，鍵盤與螢幕閱讀器才能正確操作：

<div role="tablist">
  <button role="tab" aria-selected="true">總覽</button>
  <button role="tab" aria-selected="false">設定</button>
</div>
[role="tab"][aria-selected="true"] {
  border-bottom: 2px solid var(--color-primary);
  font-weight: 600;
}

麵包屑#

用 ::after 加分隔符，避免把符號寫進 HTML 內容：

.breadcrumb {
  display: flex;
  gap: 0.5rem;
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 0.5rem;
  color: #999;
}

互動狀態別忘了 focus#

導覽元件一定要照顧鍵盤使用者。只設 :hover 而忽略 :focus，用 Tab 鍵操作時就看不出焦點在哪。

.navbar a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

不要為了「好看」直接 outline: none 把焦點框拿掉。 若要自訂，請改用 :focus-visible 提供清楚的替代樣式，否則純鍵盤使用者會完全失去定位。

小結#

需求首選做法
整頁骨架Grid grid-template-areas
自適應卡片牆repeat(auto-fit, minmax(...))
置中display: grid; place-items: center
黏頂導覽position: sticky; top: 0
行動版選單原生 <details>
焦點可見:focus-visible + outline
Backward 字體與色彩 簡單的法則 Forward