Day 9：Flexbox + Grid 混搭實戰：打造完整網頁版型

2025 iThome 鐵人賽

DAY 9

Modern Web

Modern Web：從基礎、框架到前端學習系列第 9 篇

17th鐵人賽

zoeeyee

2025-09-23 14:48:08

59 瀏覽

分享至

為什麼要混搭？

Flexbox 適合用在「一維排版」：像是導覽列、按鈕群組。
Grid 適合用在「二維排版」：像是整體頁面 Layout 或多欄內容。
👉 把兩者結合，就能快速做出現代網站結構。

預期版型

我們今天要做一個常見的四區塊版型：

----------------------
|      Header        |
----------------------
| Sidebar |  Main    |
|         |  Content |
----------------------
|      Footer        |
----------------------

HTML 結構

<body>
  <div class="container">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</body>

CSS 版型設定

/* 外層用 Grid 做主要排版 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左側 Sidebar 固定寬度，右側自適應 */
  grid-template-rows: auto 1fr auto; /* Header & Footer 自動高度，中間填滿 */
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

/* 區塊位置 */
.header {
  grid-area: header;
  background: #4cafef;
  color: white;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background: #333;
  color: white;
  padding: 20px;
}

.main {
  grid-area: main;
  background: #f5f5f5;
  padding: 20px;
}

/* Main 裡面再用 Flexbox 排內容 */
.main {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer {
  grid-area: footer;
  background: #222;
  color: white;
  text-align: center;
  padding: 15px;
}

RWD 改良版（小螢幕 Sidebar 下移

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 只有一欄 */
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}