CSS 三欄佈局

三欄佈局通常是左側欄 + 主內容 + 右側欄的結構，常見於新聞網站、社群平台等。

Grid 方式（推薦）

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
}

<div class="container">
  <aside class="sidebar-left">左側欄</aside>
  <main class="main">主內容</main>
  <aside class="sidebar-right">右側欄</aside>
</div>

Flexbox 方式

.container {
  display: flex;
  gap: 24px;
}

.sidebar-left {
  width: 200px;
  flex-shrink: 0;
}

.main {
  flex: 1;
}

.sidebar-right {
  width: 200px;
  flex-shrink: 0;
}

響應式三欄佈局

在不同螢幕大小下調整欄位顯示：

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* 平板：兩欄 */
@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 250px;
  }
  
  .sidebar-left {
    grid-column: 1 / -1;
  }
}

/* 桌機：三欄 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr 250px;
  }
  
  .sidebar-left {
    grid-column: auto;
  }
}

聖杯佈局 (Holy Grail Layout)

經典的三欄佈局，主內容在 HTML 中優先（有利於 SEO）：

Grid 實現

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
}

.main {
  grid-column: 2;
}

.sidebar-left {
  grid-column: 1;
  grid-row: 1;
}

.sidebar-right {
  grid-column: 3;
}

<div class="container">
  <main class="main">主內容（HTML 中優先）</main>
  <aside class="sidebar-left">左側欄</aside>
  <aside class="sidebar-right">右側欄</aside>
</div>

Flexbox + order 實現

.container {
  display: flex;
  gap: 24px;
}

.main {
  flex: 1;
  order: 2;
}

.sidebar-left {
  width: 200px;
  order: 1;
}

.sidebar-right {
  width: 200px;
  order: 3;
}

完整範例

新聞網站佈局

.news-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

@media (min-width: 768px) {
  .news-layout {
    grid-template-columns: 1fr 300px;
  }
}

@media (min-width: 1200px) {
  .news-layout {
    grid-template-columns: 250px 1fr 300px;
  }
}

.news-nav {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
}

.news-content {
  min-width: 0;
}

.news-sidebar {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
}

社群平台佈局

.social-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .social-layout {
    grid-template-columns: 240px minmax(0, 600px) 300px;
    justify-content: center;
  }
}

.social-nav {
  position: sticky;
  top: 80px;
  height: fit-content;
}

.social-feed {
  /* 主內容區 */
}

.social-aside {
  position: sticky;
  top: 80px;
  height: fit-content;
}

/* 小螢幕隱藏側邊欄 */
@media (max-width: 1023px) {
  .social-nav,
  .social-aside {
    display: none;
  }
}

電商產品頁

.product-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .product-layout {
    grid-template-columns: 1fr 350px;
  }
}

@media (min-width: 1200px) {
  .product-layout {
    grid-template-columns: 100px 1fr 350px;
  }
}

.product-thumbnails {
  /* 縮圖列 */
}

.product-main {
  /* 主圖和描述 */
}

.product-sidebar {
  /* 購買資訊 */
}

不等寬三欄

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;    /* 1:2:1 比例 */
  gap: 24px;
}

/* 或固定兩側，中間彈性 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  gap: 24px;
}

黏性側邊欄

.container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sidebar-left,
.sidebar-right {
  position: sticky;
  top: 20px;
  width: 200px;
  flex-shrink: 0;
}

.main {
  flex: 1;
}