三張卡片明明都設成1fr，縮窄閱讀區後卻變成一張很寬、另外兩張被擠小。先不要增加gap，也不要直接把字縮到看不清楚；欄位可能被其中一張卡片的內容最小寬度撐住。
這篇處理固定欄數的格線。重點是欄位能不能縮，以及縮了以後內容如何呈現。若要決定自動排幾欄，還需要另外安排卡片可讀寬度與斷點，不能只靠一個minmax就完成所有版型。
先看Computed裡實際分到多少寬度
選取格線容器，確認真正生效的是display:grid，再看grid-template-columns計算結果。宣告寫三個1fr，並不表示瀏覽器最後一定給出三個一樣寬的欄位。某一欄有不可斷的字串或其他最小尺寸限制，就可能先保留較大的空間。
本文案例的容器寬750px，兩個gap各16px。第一張放較長的英文字串，另外兩張放短分類名稱；同一個桌面瀏覽器測得1fr版本約為406.67、155.66、155.67px。改為minmax(0,1fr)，三欄都約239.33px。
這是自有HTML案例的實際桌面畫面，不是主題後台設定介面。數值只描述這個字體、內容與寬度條件；換一段標題或字體，結果可能不同，應用自己的卡片重新量。
1fr的最小值不是直接等於零
單獨使用彈性單位作為欄位尺寸，帶有自動最小值。內容的最小尺寸因此可能參與分配。要允許欄位縮小，可以明確寫minmax(0,1fr)，把下限設為零，上限仍採彈性分配。
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.card-title {
overflow-wrap: anywhere;
}零下限不是要求卡片最後變成零寬，而是解除這個欄位下限對縮小的限制。實際寬度仍受容器、欄數、gap與其他規則影響。不要把它解讀成「任何內容都能自動塞進去」。
欄位縮了，內容不一定跟著縮
只改grid-template-columns，長字串可能仍從卡片裡畫出去。這是內容換行問題，不能因三欄計算值相同，就宣稱溢位已經全部消失。本文同時讓標題使用overflow-wrap:anywhere，保留文字全文並允許必要斷行。
圖片則檢查自己的尺寸規則。常見的內容圖片可以用max-width:100%配合height:auto，避免顯示寬度超出所在區域；但固定寬度、min-width或行內樣式仍可能覆蓋預期。表格、程式碼與內嵌元件，也各有適合的閱讀方式，不應一律強迫所有字元斷開。
若是格線項目本身的自動最小尺寸造成限制，可以檢查min-width:0是否適合該項目；它與改欄位下限相關，卻不是同一個選取對象。先確認是哪一層保住寬度，再做最小改動，避免把整個網站每個元素都設成零下限。
等寬不等於三欄仍然好讀
容器再變窄，三欄即使成功平均分配，也可能每欄只剩幾個字。此時要降低欄數，讓卡片能容納標題、圖片與入口。斷點依實際內容測試，不需要把某個裝置名稱當作所有網站通用標準。
@media (max-width: 900px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.cards { grid-template-columns: minmax(0, 1fr); }
}這兩個數字只是可替換範例。若卡片含價格、兩個操作按鈕或很長的分類名稱，可能更早就需要少一欄。反過來，內容簡單的卡片可以有不同安排。以讀者能辨認和操作為準，逐段調整瀏覽器寬度觀察。
先找固定寬度，再決定改哪一層
格線容器若本身寫死1200px，外層只有800px，minmax無法把整個容器變窄。先核對容器的width、max-width、padding以及box-sizing。外層佔用的空間與欄位之間的gap，都要算進可用寬度。
也查看卡片或子元件是否有min-width、固定width、white-space:nowrap。某個按鈕列確實需要保留一行時，不應只為了格線好看就移除限制；可以讓卡片少一欄，或重新安排按鈕位置。
內容被overflow:hidden裁掉後，畫面看似沒有溢出，但讀者可能看不到完整標題或操作入口。不要把裁切當成欄位尺寸已正確的證據。檢查可見內容、鍵盤焦點與實際連結，再判斷版型是否可用。
不要把間距算成卡片可用寬度
三欄容器只有兩段欄間距。本文750px扣除32px，剩下718px再分成三份，所以每欄約239.33px。卡片自己的padding也要從內容空間扣除；欄位外框量起來足夠，裡面的標題仍可能比預想更窄。
如果卡片另有邊框，核對box-sizing與實際盒子尺寸。不要同時替容器加gap、替每張卡加左右margin，又以為總寬度只要除以三就好。先把間距的責任交給明確的一層，再量實際結果。
標題很長也可能是內容選擇問題。商品名稱、版本與限制條件全部擠在同一行時，可以把次要資料移到卡片內另一段，但不能為了等高而刪掉讀者必須知道的條件。CSS處理寬度，文字編排則保留判斷資訊，兩者一起看。
用會出問題的卡片再驗一次
保留最長標題、最大圖片與最多操作入口的代表卡片。修正後，量三欄的計算寬度，也看內容是否超出卡片；再縮到兩欄、一欄，確認閱讀順序與入口沒有消失。
若某張卡片仍特別寬，沿著容器到子元素逐層查看尺寸限制，不要不停添加!important。儲存修改前的CSS與本次選取器，確定只影響目標卡片；其他列表需要不同欄數，就保留自己的規則。
欄位排整齊只證明這個版型問題得到處理，不能推成載入速度或轉換率提高。要量效能或使用成果，另用實際資料核對；先把眼前的欄位寬度、內容換行和操作入口看清楚。
評論0