CSS Grid 基本應用概念 [ Part.Ⅳ ] ★在CSS 網格佈局中自動放置的技巧

★ 關於auto-placement的預設值 ★

預設流程是按行排列專案。網格將在1行的每個儲存格中放置一個專案。如果使用網格範本行屬性創建了其他行, 則網格將繼續將專案放置在這些行中。如果網格在顯式網格中沒有足夠的行來放置所有項, 則將創建新的隱式行。

如果使用grid-template-rows 屬性創建了其他行, 則網格將繼續將專案放置在這些行中。如果網格在顯式網格中沒有足夠的行來放置所有項目, 它則將創立出新的隱式行。
這意味著它們將包含添加的內容, 而不會導致溢出。但是, 您可以使用屬性網格 auto-rows 控制這些行的大小。若要使所有創建的行都為100px, 對於網格 auto-rows, 可以使用來建立size最小的行, 若是超過這個高度, 則會自動延伸到適合的內容。

★ auto-placement在欄位上的應用 ★

使用grid-auto-flow的屬性應用在欄位上，而在這種情況下, 網格將在已定義的行中添加專案, 使用 grid-template-rows 的屬性。當它填滿一行時, 它將移到下一個顯式列, 或者在隱式網格中建立一個新的列軌道。與隱式行軌道一樣, 這些列軌道將自動調整大小。可以使用grid-template-rows 控制隱式列軌道的尺寸，它們工作的方式與相同。這個例子,我們設計了一個三行軌道200px高度的網格。使用"grid-auto-columns: 300px 100px;"的設定，好讓專案能有足夠的欄位容納所有行列。

★ auto-placement 的順序 ★

Grid包含專案的混合。某些專案可能在網格上有位置, 但其它item可能是 auto-placed 。如果內容順序反映了專案在網格上的順序, 你不需要編寫 CSS 規則來放置絕對的所有內容, 在對於大多數人來說, 我們只需要記住一些簡單的規則就可以了。

1) 修改的文檔順序  

網格將未被賦予網格位置的專案置於規範中描述為 'Order修改的資料順序' 中。這意味著, 如果您使用的是 'Order' 屬性, 則這些項目將由Order來控制順序, 而不是其 DOM 順序。

2)具有放置屬性   

網格將做的第一件事是放置任何item。在下面的例子中, 我有12網格專案。item 2 和 item 5 在 css中 設計了專屬於它們自已的屬性設定， 其他專案則在空格中 auto-place。auto-placed 的專案將自己放置在被放置的專案之前的 DOM 順序,  它們不會從在其之前的項目位置開始展示。

3) 處理跨越欄位的專案

使用放置屬性, 同時還要利用 auto-placement。下面的範例，透過設置奇數item來為" grid-column-end & grid-row-end跨 Span 2 增加到Layout 裏。這代表起始行將由 auto-placement 開始, 而在跨越兩個軌道之後結束。我們一起來試著讓它在網格中留下空隙，對於 auto-placed 的專案, 如果網格遇到一個不適合軌道的item,它會自動移動到下一行, 直到找到這個item可以容納的空間。

為此，將屬性grid-auto-flow添加為容器的密度值。這與用於將流程順序更改為列的屬性相同，因此如果您在列中工作，則可以同時添加兩個值grid-auto-flow：column dense。

完成之後，網格現在將填補空白，因為它通過網格，它像以前一樣留下空隙，但是如果它發現一個項目，將適合在以前的差距，它會拿起它，並把它從DOM的順序把它放在差距。與在網格中的任何其他重新排序一樣，這不會改變邏輯順序。例如Tab鍵順序依然會按照文件順序。我們將在後面的指南中看看網格佈局的潛在可訪問性問題，但在建立視覺順序和顯示順序之間的斷點時應該小心。