CSS 等高欄位 (Equal Height Columns)

等高欄位是指讓多個並排的欄位保持相同高度，即使內容量不同。這在卡片佈局、表格式資訊展示中非常常見。

Flexbox 方式

Flexbox 預設就會讓子元素等高（align-items: stretch）：

.row {
  display: flex;
}

.column {
  flex: 1;
  padding: 20px;
  background: #e7f3ff;
}

<div class="row">
  <div class="column">短內容</div>
  <div class="column">較長的內容較長的內容較長的內容較長的內容</div>
  <div class="column">中等內容中等內容</div>
</div>

實作預覽 (Flexbox)

所有 .column 會自動等高。

加入間距

.row {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
}

Grid 方式

Grid 也會自動讓同一行的項目等高：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  padding: 20px;
  background: #fff3e0;
}

<div class="grid">
  <div class="item">Grid 項目 1</div>
  <div class="item">Grid 項目 2 有多行內容多行內容多行內容多行內容多行內容多行內容多行內容</div>
  <div class="item">Grid 項目 3</div>
</div>

實作預覽 (Grid)

實際應用

等高卡片

.card-row {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  flex: 1; /* 讓內容區域填滿剩餘空間 */
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.card-title {
  margin: 0 0 12px;
}

.card-text {
  flex: 1; /* 讓文字區域伸縮 */
  color: #666;
}

.card-button {
  margin-top: 16px;
  align-self: flex-start;
}

<div class="card-row">
  <div class="card">
    <img class="card-image" src="image1.jpg" alt="產品 1" />
    <div class="card-body">
      <h3 class="card-title">標題 1</h3>
      <p class="card-text">內容較少。</p>
      <button class="card-button">了解更多</button>
    </div>
  </div>
  <div class="card">
    <img class="card-image" src="image2.jpg" alt="產品 2" />
    <div class="card-body">
      <h3 class="card-title">標題 2</h3>
      <p class="card-text">
        這裡有非常長的內容，會撐開卡片的高度，但左右兩張卡片依然會維持對齊等高。
      </p>
      <button class="card-button">了解更多</button>
    </div>
  </div>
</div>

實作預覽 (等高卡片)

這樣即使每張卡片的文字長度不同，按鈕都會對齊在卡片底部。

特色區塊

.features {
  display: flex;
  gap: 32px;
}

.feature {
  flex: 1;
  text-align: center;
  padding: 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.feature-title {
  margin: 0 0 12px;
}

.feature-text {
  color: #666;
  line-height: 1.6;
}

<div class="features">
  <div class="feature">
    <div class="feature-icon">🚀</div>
    <h3 class="feature-title">快速效能</h3>
    <p class="feature-text">極速的載入體驗。</p>
  </div>
  <div class="feature">
    <div class="feature-icon">🛡️</div>
    <h3 class="feature-title">安全可靠</h3>
    <p class="feature-text">採用最先進的安全加密技術保護您的資料。</p>
  </div>
</div>

價格方案

.pricing {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

.pricing-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.pricing-price {
  font-size: 48px;
  font-weight: bold;
}

.pricing-features {
  flex: 1;
  padding: 24px 0;
}

.pricing-button {
  margin-top: auto;
}

<div class="pricing">
  <div class="pricing-card">
    <div class="pricing-header">
      <h3>基礎版</h3>
      <div class="pricing-price">$0</div>
    </div>
    <div class="pricing-features">
      <p>核心功能、社群支援。</p>
    </div>
    <button class="pricing-button">立即開始</button>
  </div>
  <div class="pricing-card">
    <div class="pricing-header">
      <h3>專業版</h3>
      <div class="pricing-price">$29</div>
    </div>
    <div class="pricing-features">
      <p>無限功能、24/7 支援、專屬顧問。</p>
    </div>
    <button class="pricing-button">立即升級</button>
  </div>
</div>

表格式比較

.comparison {
  display: flex;
}

.comparison-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.comparison-header {
  padding: 24px;
  background: #007bff;
  color: white;
  text-align: center;
}

.comparison-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

<div class="comparison">
  <div class="comparison-column">
    <div class="comparison-header">特性 A</div>
    <div class="comparison-row">支援</div>
    <div class="comparison-row">10 GB</div>
  </div>
  <div class="comparison-column">
    <div class="comparison-header">特性 B</div>
    <div class="comparison-row">不支援</div>
    <div class="comparison-row">100 GB</div>
  </div>
</div>

響應式等高

在小螢幕上變成堆疊，大螢幕等高排列：

.row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .row {
    flex-direction: row;
  }

  .column {
    flex: 1;
  }
}

舊方法（不推薦）

display: table

.row {
  display: table;
  width: 100%;
}

.column {
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}

負 margin 技巧

.row {
  overflow: hidden;
}

.column {
  float: left;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

這些舊方法現在已經不需要使用，Flexbox 和 Grid 是更好的選擇。

注意事項

align-items 的影響

如果設定 align-items 為其他值，等高效果會失效：

/* 會等高 */
.row {
  display: flex;
  align-items: stretch; /* 預設值 */
}

/* 不會等高 */
.row {
  display: flex;
  align-items: flex-start;
}

巢狀 Flex 容器

要讓卡片內的按鈕對齊底部，卡片本身也要是 flex 容器：

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
}