接下來的網格元素放置算法將網格元素的自動位置解析為確定位置，確保每個網格元素具有布局明確的網格區域。（Grid spans 不需要特別的解析；如果沒有明確指定，默認是1）

注意：當顯式網格中沒有位置放置自動放置的網格元素的時候該算法可以在隱式網格中創建新的行或列。

每個網格單元（無論是在顯式還是隱式網格中）都可以是 占用 或者 未占用。一個被網格元素的網格區域覆蓋的單元是占用的，否則這個單元是未占用。在算法執行期間單元的占用/未占用狀態是可以改變的。

為了明晰起見，該算法是在假設grid-auto-flow已指定row的情況下編寫的。如果將其設置為’column’，則需要交換算法中提到的row為column，內聯和塊等。

注意：自動放置算法工作于網格元素的order-modified document順序，不是它們出現在元文檔中的順序。

為網格容器內沒有元素包裹的連續的非空白字符文字生成匿名網格元素 。（因為匿名網格元素不能指定任何 grid-placement 屬性，所以它們總是自動放置的）

放置所有不能自動定位的元素。【元素顯式指定了grid area則不能自動定位。grid area的指定可以通過grid-row grid-columns和grid-area】

處理指定了行的元素。

對于每個指定了行位置的網格元素（grid-row-start和grid-row-end屬性定義了明確的網格位置），按照order-modified document的順序做如下處理：

“稀疏“ 模式(默認行為，值是sparse)

放置位置的列起始線為最早的（最小的正索引）線索引，同時要確保該元素的網格區域不會與任何已占用的網格單元重疊，并且元素的列其實線需要超過之前通過當前步驟放置在當前行中的任何網格元素的列起始線。

“緊湊” 模式 (值是dense)

放置位置的列起始線為最早的（最小的正索引）線索引，同時要確保該元素的網格區域不會與任何已占用的網格單元重疊。

確定隱式網格中的列。

在隱式網格中創建列：

從顯式網格中的列開始

在所有具有確定的列位置的元素（明確定位的元素，在上一步中定位的元素以及尚未定位但具有確定列的元素）中，根據需要將列添加到隱式網格的開始和結尾以容納這些元素。

如果在沒有確定的列位置的所有元素中最大的列跨度大于隱式網格的寬度，在隱式網格的末尾添加列以容納該元素。

例如，在下面的樣式片段中:
#grid {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-auto-flow: row;
}
#grid-item {
grid-column: 4 / span 3;
}
需要6列。顯式網格線從1到6共有5列（來自grid-template-columns），但是#grid-item列的位置意味結束的線是第7根，需要在隱式網格后面添加額外的列。

放置剩下的網格元素。

自動放置光標定義了網格中“當前插入點”，被指定為一對行和列網格線。初始的自動放置光標被設置為隱式網格的初始行和列。

grid-auto-flow值用來確定如何定位網格元素：

“稀疏“ 模式(默認行為，值是sparse)

每個之前步驟沒有放置的網格元素，按照order-modified document順序：

如果元素定義了column位置：

將光標的列設置為網格元素的起始列。如果該值小于光標之前列的值，則將光標行位置加1。

增加光標的行，直到找到一個值讓網格元素不與任何已占用的網格單元重疊（根據需要在隱式網格中創建新行）。

將元素的起始行設置為光標的行，并根據元素從當前位置的跨度設置元素的結束行。

如果元素在兩個軸上都具有自動網格位置：

遞增自動放置光標的列位置，直到該元素的網格區域不與任何已占用的網格單元重疊，或者光標的列位置加上該元素的列跨度超出了之前在此算法中確定的隱式網格的列。

如果在上一步中找到了不重疊的位置，將元素的行首和列首行設置為光標的行和列。否則，增加自動放置光標的行（根據需要在隱式網格中創建新行），將其列設置為隱式網格中起始列，然后返回上一步。

“緊湊” 模式 (值是dense)

每個之前步驟沒有放置的網格元素，按照order-modified document順序：

如果元素定義了column位置：

將光標的行設置為隱式網格中的起始行。將光標的列設置為網格元素的起始列。

增加自動放置光標的行，直到找到一個值讓網格元素不與任何已占用的網格單元格重疊（根據需要在隱式網格中創建新行）。

將元素的起始行索引設置為光標的行。（也可以根據其跨度來隱式設置元素的行尾。）

如果元素在兩個軸上都具有自動網格位置：

將光標的行和列位置設置為隱式網格中的起始行和列。

增加自動放置光標的列位置，直到該元素的網格區域不與任何占用的網格單元重疊，或者光標的列位置加上該元素的列跨度超出了之前在此算法中確定的隱式網格的列。

如果在上一步中找到了不重疊的位置，將元素的行首和列首行設置為光標的行和列。否則，增加自動放置光標的行（根據需要在隱式網格中創建新行），將列重置為隱式網格中的起始列，然后返回上一步。

order-modified document順序：彈性盒子按照order數字越小越早放置內部元素。初始情況下元素的order值都相同就按照元素在源碼中出現順序順序放置元素。【order默認值是0】

參考

8.5. Grid Item Placement Algorithm

總結

以上是生活随笔為你收集整理的网格布局之网格元素放置算法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。