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

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

這是它們的工作方式和何時使用。

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

乍一看，兩者似乎都相似，因為它們在相同的上下文中使用： repeat()的grid-template-columns內(nèi)部。但是他們的行為略有不同：

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

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

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

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

例子：

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

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

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

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

當您想要一致的間距時，請使用此功能，并且不要介意在較大屏幕上的空白空間。

何時選擇auto-fit

auto-fit行為與auto-fill一樣，但是放置了所有項目后，它將它們拉伸以填充整個行。

回到示例：

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

這里有什么變化？

• 列仍在200px開始。
• 但是，一旦放置，瀏覽器將擴展它們以占用所有可用空間。

這為您提供了更緊密，更緊湊的布局 - 特別有用，對于畫廊，卡片或任何看起來更好的東西。

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

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

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

要記住的一些事情：

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

另外，測試布局在不同數(shù)量的項目中的表現(xiàn) - 有時auto-fit可能會導(dǎo)致意外的伸展運動，如果沒有足夠的元素。

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

以上是自動擬合與自動填充關(guān)鍵字如何在重復(fù)（）中起作用？的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！