日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

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

馬上教你用！?

?? 基礎(chǔ)概念

假設(shè)你有這樣一個(gè)需求：

• 一排展示很多卡片
• 每個(gè)卡片最小寬度 200px，剩余空間平均分配
• 屏幕變窄時(shí)自動(dòng)換行

只需在父元素加兩行 CSS 就能實(shí)現(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;
}

下面詳細(xì)解釋這行代碼的意思：

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

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

1. grid-template-columns

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

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

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

3. minmax(200px, 1fr)

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

4. 綜合起來(lái)

• 這行代碼的意思就是：
• 網(wǎng)格會(huì)自動(dòng)生成多列，每列最小 200px，最大可以平分一行的剩余空間。
• 屏幕寬了就多顯示幾列，屏幕窄了就少顯示幾列，自動(dòng)換行，自適應(yīng)各種屏幕！
• 「不需要媒體查詢(xún)」，布局就能靈活響應(yīng)。

總結(jié)一句話：

?

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
讓你的網(wǎng)格卡片「最小 200px，最大自動(dòng)填滿(mǎn)一行」，自動(dòng)適應(yīng)任何屏幕，布局永遠(yuǎn)美觀！

?

這里還能填 auto-fill，和 auto-fit 有啥區(qū)別？

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

1. auto-fill

?

?? 「盡可能多地填充列，即使沒(méi)有內(nèi)容也會(huì) “占位”」

?

• 會(huì)自動(dòng)創(chuàng)建盡可能多的列軌道（包括空軌道），讓網(wǎng)格盡量填滿(mǎn)容器。
• 適合需要 “列對(duì)齊” 或“固定網(wǎng)格數(shù)”的場(chǎng)景。

2. auto-fit

?

?? 「自動(dòng)適應(yīng)內(nèi)容，能合并多余空列，不占位」

?

• 會(huì)自動(dòng) “折疊” 沒(méi)有內(nèi)容的軌道，讓現(xiàn)有的內(nèi)容盡量拉伸占滿(mǎn)空間。
• 適合希望內(nèi)容自適應(yīng)填滿(mǎn)整行的場(chǎng)景。

?? 直觀對(duì)比

假設(shè)容器寬度能容納 10 個(gè) 200px 的卡片，但你只放了 5 個(gè)卡片：

• auto-fill 會(huì)保留 10 列寬度，5 個(gè)卡片在前五列，后面五列是 “空軌道”。
• auto-fit 會(huì)折疊掉后面五列，讓這 5 個(gè)卡片拉伸填滿(mǎn)整行。

?? Demo 代碼：

<h2>auto-fill</h2>
<div class="grid-fill">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
</div>

<h2>auto-fit</h2>
<div class="grid-fit">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
</div>

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.grid-fill div {
  background: #08f700;
}
.grid-fit div {
  background: #f7b500;
}
.grid-fill div,
.grid-fit div {
  padding: 24px;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
}

兼容性

caniuse.com/?search=aut…^[1]

?? 什么時(shí)候用 auto-fill，什么時(shí)候用 auto-fit？

• 「希望每行 “有多少內(nèi)容就撐多寬”，用 auto-fit」
  適合卡片式布局、相冊(cè)、響應(yīng)式按鈕等。

• 「希望 “固定列數(shù) / 有占位”，用 auto-fill」
  比如表格、日歷，或者你希望網(wǎng)格始終對(duì)齊，即使內(nèi)容不滿(mǎn)。

?? 總結(jié)

?? 小結(jié)

• auto-fill 更像 “占位”，auto-fit 更像 “自適應(yīng)”
• 推薦大部分響應(yīng)式卡片用 auto-fit
• 善用 minmax 配合，讓列寬自適應(yīng)得更自然

只需兩行代碼，你的頁(yè)面就能優(yōu)雅適配各種屏幕！