CSS網(wǎng)格中的自動(dòng)擬合和自動(dòng)填充之間的區(qū)別在於，自動(dòng)填充會(huì)創(chuàng)建盡可能多的軌道，而無(wú)需調(diào)整大小，留出額外的空間，而自動(dòng)擬合的空間則調(diào)整了軌道以填充可用空間。 1。自動(dòng)填充，如果需要，可以保持一致的軌道大小，並離開(kāi)空格。 2。自動(dòng)擬合調(diào)整軌道大小以消除空白空間，拉伸物品以填充行。兩者都可以與Minmax（）進(jìn)行響應(yīng)迅速的佈局，在這種佈局中，自動(dòng)填充西裝始終如一的間距和自動(dòng)擬合功能非常適合緊湊，全寬度設(shè)計(jì)（例如畫(huà)廊或卡片）。

使用CSS網(wǎng)格時(shí)， repeat()函數(shù)非常方便地創(chuàng)建重複列或行。當(dāng)您將其與auto-fit或auto-fill配對(duì)時(shí)，就會(huì)發(fā)生真正的魔術(shù)。這些關(guān)鍵字可幫助您的佈局根據(jù)可用空間進(jìn)行響應(yīng)性調(diào)整。

這是它們的工作方式和何時(shí)使用。

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

乍一看，兩者似乎都相似，因?yàn)樗鼈冊(cè)谙嗤纳舷挛闹惺褂茫?repeat()的grid-template-columns內(nèi)部。但是他們的行為略有不同：

• auto-fill會(huì)創(chuàng)建盡可能多的軌道（列），而無(wú)需更改容器的大小。
• auto-fit作用與auto-fill相同，但隨後大小大小以填充可用空間。

因此，如果您的目標(biāo)是根據(jù)屏幕尺寸進(jìn)行調(diào)整的響應(yīng)式網(wǎng)格，那麼根據(jù)您的佈局目標(biāo)，一個(gè)可能比另一個(gè)更合適。

如何在repeat()中使用auto-fill

使用auto-fill意味著瀏覽器將根據(jù)您定義的大小創(chuàng)建盡可能多的列。如果剩下額外的空間，這些物品將不會(huì)伸展到它來(lái)填補(bǔ)它 - 差距會(huì)保持原樣。

例子：

 。網(wǎng)格 {
  顯示：網(wǎng)格；
  網(wǎng)格板柱：重複（自動(dòng)填充，Minmax（200px，1fr））;
}

此設(shè)置告訴瀏覽器：

• 每列應(yīng)至少寬200px。
• 如果屏幕更寬，將會(huì)出現(xiàn)更多列。
• 如果屏幕收縮，列會(huì)包裹，將最小寬度保持在200px。

關(guān)鍵是：額外的空間未重新分配- 因此可能會(huì)保留一些空間。

當(dāng)您想要一致的間距時(shí)，請(qǐng)使用此功能，並且不要介意在較大屏幕上的空白空間。

何時(shí)選擇auto-fit

auto-fit行為與auto-fill一樣，但是放置了所有項(xiàng)目後，它將它們拉伸以填充整個(gè)行。

回到示例：

 。網(wǎng)格 {
  顯示：網(wǎng)格；
  網(wǎng)格 - 板塊柱：重複（自動(dòng)擬合，Minmax（200px，1fr））;
}

這裡有什麼變化？

• 列仍在200px開(kāi)始。
• 但是，一旦放置，瀏覽器將擴(kuò)展它們以佔(zhàn)用所有可用空間。

這為您提供了更緊密，更緊湊的佈局 - 特別有用，對(duì)於畫(huà)廊，卡片或任何看起來(lái)更好的東西。

簡(jiǎn)而言之： auto-fit調(diào)整軌道以消除空白空間。

與minmax()和auto-*合作的實(shí)用提示

如果您要使用任何一個(gè)關(guān)鍵字，則將它們與minmax()結(jié)合使用是一個(gè)好主意。它使您可以控制這些列的靈活性。

要記住的一些事情：

• 您可以用固定尺寸混合auto-fit ，但是minmax()更靈活。
• 使用1fr可以使軌道平均成長(zhǎng) - 非常適合平衡。
• 除非您具有特定的設(shè)計(jì)約束，否則請(qǐng)盡量不要設(shè)置硬值。

另外，測(cè)試佈局在不同數(shù)量的項(xiàng)目中的表現(xiàn) - 有時(shí)auto-fit可能會(huì)導(dǎo)致意外的伸展運(yùn)動(dòng)，如果沒(méi)有足夠的元素。

基本上就是這樣。這兩個(gè)關(guān)鍵字可讓您在沒(méi)有媒體查詢的情況下構(gòu)建智能，響應(yīng)的佈局。一旦您掌握了它們與minmax()和項(xiàng)目數(shù)量的互動(dòng)方式，您可能會(huì)經(jīng)常接觸它們。

以上是自動(dòng)擬合與自動(dòng)填充關(guān)鍵字如何在重複（）中起作用？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！