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

密鑰概念：

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

在潛水之前，請(qǐng)了解以下核心概念：

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

>

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

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

>值（啟動(dòng)行，啟動(dòng)列，結(jié)束行，結(jié)尾列）來(lái)確定其位置。

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

接下來(lái)，放置了帶有指定

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

• >

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

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

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

  （密集）

>

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

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

>

步驟5：放置剩餘的項(xiàng)目：

>
1. >自動(dòng)置換光標(biāo)（最初在左上角）用於定位剩餘的項(xiàng)目。 包裝模式（稀疏或緻密）會(huì)影響放置：
稀疏包裝：

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

>

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

• >

  （稀疏） （密集）

結(jié)論：

• 這款詳細(xì)的演練闡明了CSS電網(wǎng)自動(dòng)置換算法。嘗試不同的佈局以鞏固您的理解。 原始文本的FAQ部分已被簡(jiǎn)短省略，因?yàn)楹诵乃惴ǖ慕忉屢呀?jīng)非常全面。

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