>本教程詳細介紹了CSS網(wǎng)格布局模塊的自動置換算法，該算法將基于grid-auto-flow屬性的元素定位。 以前的文章涵蓋了CSS網(wǎng)格基礎(chǔ)知識，但該文章專注于算法本身，解釋了元素如何最終位置。

密鑰概念：

自動置換算法，由
• >管理（默認為grid-auto-flow），位置網(wǎng)格項目。row
>它處理匿名網(wǎng)格項目（直接在網(wǎng)格容器中的未風格文本）。
明確定位的元素（使用
• ）首先放置。grid-area>
具有定義的行位置的元素，但使用稀疏（默認）或密集包裝的未定義列位置放置。
• > 算法確定隱式網(wǎng)格的列計數(shù)，根據(jù)需要擴展，以適應(yīng)具有特定列位置或大跨度的項目。
>最后，剩余的項目是根據(jù)
• >定位的，使用一個自動置換光標，該光標從隱式網(wǎng)格的左上角開始。
• grid-auto-flow了解算法：

在潛水之前，請了解以下核心概念：

匿名網(wǎng)格項目：網(wǎng)格容器中的文本（未包裝在標簽中）成為匿名網(wǎng)格項目。 它不能直接定型，但繼承了父樣式。 whitespace不會創(chuàng)建匿名項目。

>

>網(wǎng)格跨度：
• ，除非指定，否則網(wǎng)格默認為1（一個單元格）。 >隱式網(wǎng)格：
，
• 和>定義的網(wǎng)格是顯式網(wǎng)格。 隱式網(wǎng)格超出了此功能，以適應(yīng)位于其邊界之外的物品。
以下解釋假定
• 。 對于，在說明中交換“行”和“列”。 >grid-template-rows>步驟1：匿名網(wǎng)格項目生成：grid-template-columnsgrid-template-areas> 算法開始于直接從網(wǎng)格容器中的任何文本中創(chuàng)建匿名網(wǎng)格項目。 這些是不可錨定的，但繼承了父母的樣式。

步驟2：明確放置位置元素：grid-auto-flow: row> 首先放置具有明確定義位置的grid-auto-flow: column元素。該算法使用

>值（啟動行，啟動列，結(jié)束行，結(jié)尾列）來確定其位置。

>步驟3：使用設(shè)置行放置元素，未設(shè)置的列位置：

接下來，放置了帶有指定

和grid-row-start的元素（而不是列位置）。 該算法使用稀疏或致密的包裝：grid-row-end

• >

  稀疏包裝（默認值）：該元素放置在最早的可用列中，而無需重疊現(xiàn)有項目。 它僅考慮在此步驟中僅放置的項目，而不是更早的步驟。>

  >
密集填料（
• ）：元素放在最早的可用列中，即使這意味著將其放在此步驟中的同一行中。

  grid-auto-flow: row dense>（稀疏）

  （密集）

>

步驟4：確定隱式網(wǎng)格列計數(shù)：> 算法確定隱式網(wǎng)格的列計數(shù)：>

從顯式網(wǎng)格的列計數(shù)開始。 添加列以適應(yīng)具有定義列位置的項目。 如果其余項目中最大的列跨度超過了當前的隱式網(wǎng)格寬度。

>

步驟5：放置剩余的項目：

>
1. >自動置換光標（最初在左上角）用于定位剩余的項目。 包裝模式（稀疏或致密）會影響放置：
稀疏包裝：

光標跨列移動，直到找到非重疊位置為止。如果在當前行中找不到空間，它將移至下一行。

>

密集的填料：光標將每個項目的隱式網(wǎng)格上左上重置，找到最早的可用的非重疊位置。

• >

  （稀疏） （密集）

結(jié)論：

• 這款詳細的演練闡明了CSS電網(wǎng)自動置換算法。嘗試不同的布局以鞏固您的理解。 原始文本的FAQ部分已被簡短省略，因為核心算法的解釋已經(jīng)非常全面。

以上是CSS網(wǎng)格中自動置換算法的指南的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！