在網頁前端開發中，我們經常需要將區塊拆分成左右兩欄，例如左邊放標籤或圖示、右邊放標題與內文。當我們把任務交給 AI 生成時，最常見的反應就是直接使用 Flexbox 排版。
雖然 Flexbox 非常好用，但在處理多行、不規則高度或是希望呈現傳統表格對齊（例如類似 HTML 表格中的 tr 包含兩個 td ）的結構時，以下示範如何把第4列搬到第2例右側。
AI 生成的盲點：為什麼 Flexbox 在這裡會翻車？
如果讓 AI 直接用 display: flex 來處理這種左側是標籤、右側是標題加內文的卡片，通常會遇到以下幾個痛點：
- 高度與垂直對齊難以控制：當右側的文字因為換行變成兩行或三行時，左側的標籤或圖示往往會跟著亂跑，無法與右側內容保持一致的垂直置中或頂端對齊。
- 巢狀結構過於肥胖：為了模擬左右兩欄，AI 往往會生出好幾層
div來互相巢狀包裹，導致 HTML 結構變得很冗長。 - 欄位寬度不穩定：如果左側的標籤文字長度不一致，會直接導致右側的文字區域跟著被擠壓變形。
核心原理：為什麼改用 CSS Grid？
為了達到類似傳統表格（ tr 搭配兩個 td ）的嚴謹對齊效果，最佳解法其實是 CSS Grid。
我們只需要將卡片本身設為 display: grid，並透過 grid-template-columns: 200px 1fr：
- 第一欄（左側）固定寬度或給予適當的空間放標籤與圖示。
- 第二欄（右側）設定為
1fr，自動佔滿剩餘的所有寬度。
這樣一來，不管右側的文字換幾行、內容有多長，左右兩欄的對齊關係依然穩固如山，完全不需要擔心版面變形。
這是一篇針對此次 CSS 版面調整所撰寫的技術部落格文章，內容包含原理簡介、AI 生成常見陷阱、實際遇到的問題以及解法，並已將程式碼對照調整為清楚的 Before 與 After 區塊。
從 AI 生成的 Flex 陷阱談起：如何用 CSS Grid 打造完美的左右雙欄卡片
在網頁前端開發中，我們經常需要將區塊拆分成左右兩欄，例如左邊放標籤或圖示、右邊放標題與內文。當我們把任務交給 AI 生成時，最常見的反應就是直接使用 Flexbox 排版。
雖然 Flexbox 非常好用，但在處理多行、不規則高度或是希望呈現傳統表格對齊（例如類似 HTML 表格中的 tr 包含兩個 td ）的結構時，使用 Flexbox 往往會衍生出許多意想不到的排版災難。
AI 生成的盲點：為什麼 Flexbox 在這裡會翻車？
如果讓 AI 直接用 display: flex 來處理這種左側是標籤、右側是標題加內文的卡片，通常會遇到以下幾個痛點：
- 高度與垂直對齊難以控制：當右側的文字因為換行變成兩行或三行時，左側的標籤或圖示往往會跟著亂跑，無法與右側內容保持一致的垂直置中或頂端對齊。
- 巢狀結構過於肥胖：為了模擬左右兩欄，AI 往往會生出好幾層
div來互相巢狀包裹，導致 HTML 結構變得很冗長。 - 欄位寬度不穩定：如果左側的標籤文字長度不一致，會直接導致右側的文字區域跟著被擠壓變形。
核心原理：為什麼改用 CSS Grid？
為了達到類似傳統表格（ tr 搭配兩個 td ）的嚴謹對齊效果，最佳解法其實是 CSS Grid。
我們只需要將卡片本身設為 display: grid，並透過 grid-template-columns: 200px 1fr：
- 第一欄（左側）固定寬度或給予適當的空間放標籤與圖示。
- 第二欄（右側）設定為
1fr，自動佔滿剩餘的所有寬度。
這樣一來，不管右側的文字換幾行、內容有多長，左右兩欄的對齊關係依然穩固如山，完全不需要擔心版面變形。
實戰修改前後對照
CSS 修改前後對照
Before（修改前）：
CSS
/* Right: 3 Alignment Pillars */
.alignment-pillars {
position: absolute;
top: 170px;
left: 510px;
display: flex;
flex-direction: column;
gap: 18px;
}
.align-card {
padding: 18px 26px;
opacity: 0;
}
After（修改後）：
CSS
/* Right: 3 Alignment Pillars */
.alignment-pillars {
position: absolute;
top: 170px;
left: 510px;
display: flex;
flex-direction: column;
gap: 18px;
width: 600px;
}
.align-card {
padding: 18px 26px;
opacity: 0;
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
align-items: center;
}
.align-card-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.align-card-right {
display: flex;
flex-direction: column;
gap: 4px;
}
HTML 修改前後對照
Before（修改前）：
HTML
<!-- Pillar 1 -->
<div class="align-card align-1 card-base">
<div class="pillar-tag p1">心法 1：釐清真正的需求</div>
<div class="pillar-title">拿到任務先別急著打開檔案或叫 AI 產出</div>
<div class="pillar-desc">多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。</div>
</div>
After（修改後）：
HTML
<!-- Pillar 1 -->
<div class="align-card align-1 card-base">
<div class="align-card-left">
<div class="pillar-tag p1">心法 1：釐清真正的需求</div>
</div>
<div class="align-card-right">
<div class="pillar-title">拿到任務先別急著打開檔案或叫 AI 產出</div>
<div class="pillar-desc">多問幾個為什麼，找出背後真正要解決的核心問題。先問清定價需求，一頁表格就能直擊核心。</div>
</div>
</div>
總結
下次當你需要處理類似表格列、左右對齊的區塊時，如果 AI 自動幫你寫了滿滿的 Flexbox 巢狀結構，不妨主動要求它改用 CSS Grid。只要定義好欄位寬度比例，就能用最乾淨的程式碼，換取最穩定、最不容易跑版的畫面表現。