CSS Grid auto-fit 與 auto-fill 差在哪？空欄、卡片拉伸與最後一列

2026-11-02

前端

CSS

/

HTML

/

前端開發

/

最佳實踐

同樣寫 repeat(..., minmax(180px, 1fr))，只有兩張卡片時，auto-fit 會把卡片撐寬，auto-fill 則可能留下空欄。選擇的關鍵是：容器放得下更多欄、資料卻不足時，是否保留那些欄位。 若每個欄軌已被某一列的卡片占用，兩者可能看起來一樣。

這也回答一個常見誤會：auto-fit 不保證讓最後一列的少數卡片各自分滿整行。Grid 的欄軌跨列共用，判斷的是整個欄軌有沒有項目，不只看最後一列。

兩張卡片時，空欄決定剩餘寬度怎麼分#

CSS Grid 規格與 MDN repeat()說明：auto-fit 先依 auto-fill 的方式排出重複欄軌，放置項目後，再收合沒有 in-flow 項目占用或跨越的欄軌；收合欄軌與相關間距不再占原本的寬度。

以寬 800px、gap 16px、每欄最小 180px 為例，可以排四欄。只有兩張普通、依序放置的卡片時：

auto-fill 保留四欄，兩張卡片各約 188px。
auto-fit 收合兩個空欄，兩張卡片各約 392px。

維護流程於 2026-11-02 在 macOS Chrome 執行下方 HTML：800px 容器下，兩張卡片分別量到 188px 與 392px；五張卡片在兩種模式皆為 188px。其他環境可能依子像素取整呈現小差異。實際專案還要確認 padding、border、欄跨距與內容限制，不能把 188px 當成所有容器的固定值。

用同一組內容比較，別一次改三個條件#

以下完整 HTML 包含兩張與五張卡片的兩種模式。存成 grid-demo.html 後以瀏覽器開啟，使用按鈕切換容器寬度；也可用 DevTools 檢查欄軌。

1
<!doctype html>
2
<html lang="zh-Hant">
3
<meta charset="utf-8">
4
<meta name="viewport" content="width=device-width,initial-scale=1">
5
<title>auto-fit 與 auto-fill 欄軌比較</title>
6
<style>
7
* { box-sizing: border-box; }
8
body { margin: 24px; font: 16px/1.6 system-ui; background: #faf8f3; color: #243942; }
9
.demo { width: 800px; max-width: 100%; display: grid; gap: 16px; margin-block: 16px 32px; background: #e5e7e9; }
10
.fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
11
.fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
12
.card { min-width: 0; padding: 16px; background: #cce5dc; overflow-wrap: anywhere; }
13
.fit .card { background: #f1c2ad; }
14
</style>
15
<h1>空欄與最後一列是兩個問題</h1>
16
<p>將視窗縮窄，或用 DevTools 檢查 grid-template-columns 與卡片寬度。</p>
17
<button type="button" onclick="document.querySelectorAll('.demo').forEach(el => el.style.width = '800px')">容器 800px</button>
18
<button type="button" onclick="document.querySelectorAll('.demo').forEach(el => el.style.width = '160px')">容器 160px</button>
19
<h2>auto-fill：兩張卡片</h2>
20
<section id="fill-two" class="demo fill" aria-label="auto-fill 兩張卡片">
21
<article class="card">卡片 A</article><article class="card">卡片 B</article>
22
</section>
23
<h2>auto-fit：兩張卡片</h2>
24
<section id="fit-two" class="demo fit" aria-label="auto-fit 兩張卡片">
25
<article class="card">卡片 A</article><article class="card">卡片 B</article>
26
</section>
27
<h2>auto-fill：五張卡片</h2>
28
<section id="fill-five" class="demo fill" aria-label="auto-fill 五張卡片">
29
<article class="card">卡片 A</article><article class="card">卡片 B</article><article class="card">卡片 C</article><article class="card">卡片 D</article><article class="card">卡片 E</article>
30
</section>
31
<h2>auto-fit：五張卡片</h2>
32
<section id="fit-five" class="demo fit" aria-label="auto-fit 五張卡片">
33
<article class="card">卡片 A</article><article class="card">卡片 B</article><article class="card">卡片 C</article><article class="card">卡片 D</article><article class="card">卡片 E</article>
34
</section>
35
</html>