用 CSS Grid 打造真正「自動化」的響應式文章卡片
在部落格或作品集網站中，一個能整齊陳列多篇文章的「卡片列表」是不可或缺的。傳統作法往往需要搭配多個媒體查詢 (Media Query) 才能適應不同裝置，過程繁瑣且不易維護。
本篇教學將引導您使用現代 CSS Grid 技術，打造一個外觀精美、且能完全自動判斷欄數的響應式卡片系統。它極其強大，只需一行關鍵程式碼，就能讓您徹底告別手動設定斷點的時代。
步驟一：HTML 結構與最佳實踐
首先，我們需要一個語意化的 HTML 結構。您需要一個主要的容器 (.card-list-container) 來放置所有卡片，而每一張卡片都是一個 <a> 標籤，這樣整張卡片都能被點擊。
<div class="card-list-container">
<a href="文章連結.html" class="article-card">
<img class="card-thumbnail"
src="您的圖片網址.jpg"
alt="文章的描述性替代文字"
onerror="this.onerror=null;this.src='https://placehold.co/600x338/ecf0f1/95a5a6?text=Image+Not+Found';">
<div class="card-content">
<h3 class="card-title">文章標題放在這裡</h3>
</div>
</a>
<!-- 在此重複放置更多卡片... -->
</div>我們在 <img> 標籤中加入了 onerror 屬性，這是一個非常重要的優化。當圖片因故無法載入時，它會自動替換成一張預備用的佔位圖，避免在您的網站上出現掃興的「叉燒包」。
步驟二：CSS 樣式與魔法般的響應式佈局
這是整個系統的核心。這段 CSS 定義了容器的網格佈局、單張卡片的外觀，以及互動效果。
關鍵程式碼解析
在看完整程式碼之前，讓我們先來解密最關鍵的那一行：
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
- repeat(...): 告訴瀏覽器重複產生欄位。
- auto-fit: 這是魔法的來源！它會自動判斷容器的寬度，決定一行可以「塞下」多少張卡片。如果空間不足，就會自動將卡片換到下一行。
- minmax(160px, 1fr): 這是在定義每一張卡片的彈性寬度。
- 160px: 卡片的最小寬度不會低於 160px。
- 1fr: 卡片的最大寬度。1fr 代表「一份剩餘空間」，它會讓同一行的所有卡片自動均分容器的可用寬度，實現完美的對齊。
完整 CSS 程式碼
請將以下所有程式碼複製到您網站的自訂 CSS 區域。
/* ============================================= */
/* == 響應式卡片系統樣式 (最終版) == */
/* ============================================= */
/* --- 1. 卡片列表的容器 --- */
.card-list-container {
display: grid;
/* 這就是魔法的一行：*/
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px; /* 卡片之間的間距 */
padding: 20px 0;
}
/* --- 2. 卡片本身 --- */
.article-card {
display: flex;
flex-direction: column; /* 將子項目垂直堆疊 */
text-decoration: none;
background-color: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
/* 2a. 卡片的滑鼠懸浮效果 */
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
/* --- 3. 卡片的縮圖 --- */
.card-thumbnail {
width: 100%;
aspect-ratio: 16 / 9; /* 維持 16:9 的長寬比 */
object-fit: cover; /* 確保圖片填滿空間且不變形 */
display: block;
}
/* --- 4. 卡片的文字內容區域 --- */
.card-content {
padding: 20px;
flex-grow: 1; /* 關鍵：讓此區塊自動伸展填滿剩餘空間，確保所有卡片等高 */
display: flex;
flex-direction: column;
justify-content: center;
}
/* 4a. 卡片的標題 */
.card-title {
margin: 0;
font-size: 1.1em;
line-height: 1.5;
color: #34495e;
}第三章：實際效果展示
這套系統的魅力在於它能根據可用寬度，自動調整欄數。
展示一：少量卡片（自動填滿）
當只有 2~3 張卡片且螢幕夠寬時，它們不會擠在左邊，而是會各自伸展填滿可用空間，形成平衡的佈局。
展示二：多張卡片（自動換行）
這就是 auto-fit 發揮作用的地方。當容器無法在一行內容納所有卡片時，它會自動將多餘的卡片換到下一行，並完美地維持網格對齊。在寬螢幕上可能是 3-4 欄，在平板上變 2 欄，在手機上則是 1 欄。您完全不需要為此撰寫任何 Media Query！
總結
透過 CSS Grid 的強大功能，我們僅用短短幾行程式碼，就建立了一個過去需要複雜計算才能實現的專業響應式卡片系統。它不僅讓您的網站看起來更專業，更大幅簡化了未來的維護工作。現在就動手將這套系統應用到您的網站上吧！