CSS網格中自動置換算法的指南

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

密鑰概念：

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

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

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

>

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

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

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

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

接下來，放置了帶有指定

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

• >

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

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

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

  （密集）

>

步驟4：確定隱式網格列計數：> 算法確定隱式網格的列計數：>

從顯式網格的列計數開始。 添加列以適應具有定義列位置的項目。 如果其餘項目中最大的列跨度超過了當前的隱式網格寬度。

>

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

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

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

>

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

• >

  （稀疏） （密集）

結論：

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

以上是CSS網格中自動置換算法的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！