基礎概念

假設你有這樣一個需求：一排展示很多卡片，每個卡片最小寬度 200px，剩余空間平均分配，屏幕變窄時自動換行

只需在父元素加兩行 CSS 就能實現(xiàn)：

/* 父元素 */
.grid {
? display: grid;
? grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 子元素 */
.item {
? height: 200px;
? background-color: rgb(141, 141, 255);
? border-radius: 10px;
}

下面詳細解釋這行代碼的意思

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

這是 CSS Grid 布局里定義列寬的常用寫法，逐個拆解如下：

什么鬼？兩行代碼就能適應任何屏幕？

（?金石瓜分計劃回歸，速戳下圖了解詳情?）

你可能想不到，只用「兩行 CSS」，就能讓你的卡片、圖片、內(nèi)容塊「自動適應」各種屏幕寬度，徹底擺脫復雜的媒體查詢！ 秘訣就是 CSS Grid 的?auto-fill?和?auto-fit。

馬上教你用！?

? 基礎概念

假設你有這樣一個需求：

• 一排展示很多卡片
• 每個卡片最小寬度 200px，剩余空間平均分配
• 屏幕變窄時自動換行

只需在父元素加兩行 CSS 就能實現(xiàn)：

/* 父元素 */
.grid {
? display: grid;
? grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 子元素 */
.item {
? height: 200px;
? background-color: rgb(141, 141, 255);
? border-radius: 10px;
}

下面詳細解釋這行代碼的意思：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

這是 CSS Grid 布局里定義列寬的常用寫法，逐個拆解如下：

1.?grid-template-columns

• 作用：定義「網(wǎng)格容器」里有多少列，以及每列的寬度。

2.?repeat(auto-fit, ...)

• repeat?是個「重復函數(shù)」，表示后面的模式會被重復多次。
• auto-fit?是一個特殊值，意思是：「自動根據(jù)容器寬度，能放下幾個就放幾個」，每列都用后面的規(guī)則。
  • 容器寬度足夠時，能多放就多放，放不下就自動換行。

3.?minmax(200px, 1fr)

• minmax?也是一個函數(shù)，意思是：「每列最小 200px，最大可以占 1fr（剩余空間的平分）」
• 具體來說：
  • 當屏幕寬度很窄時，每列「最小寬度是 200px」，再窄就會換行。
  • 當屏幕寬度變寬，卡片會自動拉伸，每列「最大可以占據(jù)剩余空間的等分」（1fr），讓內(nèi)容填滿整行。

綜合起來

網(wǎng)格會自動生成多列，每列最小 200px，最大可以平分一行的剩余空間。

屏幕寬了就多顯示幾列，屏幕窄了就少顯示幾列，自動換行，自適應各種屏幕！

「不需要媒體查詢」，布局就能靈活響應。

auto-fill 和 auto-fit 有啥區(qū)別？

auto-fill：盡可能多地填充列，即使沒有內(nèi)容也會 “占位”

auto-fit：自動適應內(nèi)容，能合并多余空列，不占位