CSS gap 怎麼用：卡片換行後，間距也保持一致

內容目錄

卡片換行後，右邊多出一段空白，或第二排離第一排太近，常見原因是把間距寫在每張卡的 margin 上。當需求是「項目之間留一樣的距離」，可以讓 Flex 或 Grid 容器用 gap 統一處理。

把間距交給容器

這個示例用六張圖卡。卡片可換行，水平間距20px、排與排之間16px；不再替每張卡加右邊或下方的 margin。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.card {
  flex: 1 1 220px;
  margin: 0;
}

gap 的兩個值依序是 row-gap、column-gap。本例是橫向 Flex，第一個值控制排與排，第二個值控制同排項目；換成其他排列方向時，要按實際軸向理解，不直接照「第一個永遠是水平」套用。

gap 留在項目或軌道之間，不是在容器外框四周。卡片群需要離邊框24px，就另加容器 padding: 24px；不要拿 gap 代替 padding。

也別一邊保留卡片 margin，一邊新增 gap。兩者都會影響可見間距，結果容易比設定的數字更大。原本若用負 margin 抵銷兩側空白，改寫時也要一起檢查，避免新舊規則疊加。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px 20px;
}

Grid 版本讓欄寬隨可用空間分配，小畫面不會硬塞一個比容器更寬的220px欄。Flex 則可能把最後一排剩下的卡拉寬；要不要拉寬是版面選擇，不是 gap 本身出錯。

在自有測試頁把寬度縮到手機大小，確認卡片仍在容器內、圖不被拉扁、長標題能換行，再比較第一排與最後一排。若使用 justify-content: space-between，分配的剩餘空間可能讓可見距離大於 gap，不能只量其中一個數字判定失效。

先替一個卡片群改規則，保留原CSS備份；不符合預期就還原這個容器與卡片的宣告。圖中的六張卡片是排版示例，不是本站的商品列表。真實頁面若有側欄、既有 margin 或固定控制項，仍要在那個頁面看一次。

資料核對於2026年10月3日；尺寸是本例選擇，不是所有網站的固定標準。

原文鏈接：https://wntheme.com/css-gap-wrapping-cards/，轉載請註明出處。