網格模板（grid-template）屬性及其普通寫法（longhands）定義了一個固定數量的軌道，構成顯式網格。?

當網格項目定位在這些界限之外，網格容器通過增加隱式網格線生成隱式網格軌道。?

這些隱含的和顯式的網格線一起構成隱式網格（implicit grid）。?

隱式網格軌道的尺寸由網格自動行（grid-auto-rows）和網格自動列（grid-auto-columns）屬性來確定。

網格自動流（grid-auto-flow）屬性用來控制無明確位置的網格項的自動定位（auto-placement），?

一旦顯式網格被填滿（或者如果沒有顯式的網格），auto-placement也將導致隱式網格軌道的生成。

自動生成行和列的尺寸：grid-auto-rows 和 grid-auto-columns 屬性

如果一個網格項被放到一個未明確定義尺寸的行或列中，隱式網格軌道將被創建來容納它。? 這在兩種情況下會發生：通過顯式定位到一個超出范圍的行或列中，或是由自動定位算法創建額外的行或列。? 網格自動列和網格自動行屬性用來指定這樣的隱式創建的軌道的大小。
我們仍然通過實例來學習這個屬性的用法： #grid {display: grid;grid-template-columns: 20px;grid-template-rows: 20px }#A { grid-column: 1; grid-row: 1; }#B { grid-column: 5; grid-row: 1 / span 2; }#C { grid-column: 1 / span 2; grid-row: 2; }
<div id="grid"><div id="A">A</div><div id="B">B</div><div id="C">C</div> </div>
如果一個網格項被放到一個未明確定義尺寸的行或列中，隱式網格軌道將被創建來容納它。? 這在兩種情況下會發生：通過顯式定位到一個超出范圍的行或列中，或是由自動定位算法創建額外的行或列。? 網格自動列和網格自動行屬性用來指定這樣的隱式創建的軌道的大小。
上面這個例子演示了隱式網格軌道的使用。本例中共創建了2行5列，其中顯式聲明的只有第1行/第1列，除此之外有1個隱含行和4個隱含列。? 網格項B位于網格線5，這將自動創建4個隱式網格列，但是由于列3和4中沒有任何網格項，所以其寬度塌縮為0。
你可以通過 在線實例自己測試下。（請使用Chrome打開） 注意：由于網格布局是制定中的W3規范，所以瀏覽器尚未完全支持，目前Chrome已支持。

自動布局：網格自動流（grid-auto-flow）屬性

未明確指定位置的網格項將通過自動定位算法來自動放置到網格容器的未占用空間中。? 網格自動流就是用來控制自動布局算法如何工作的，指定如何把自動布局的網格項放進網格中。
row
自動布局算法把網格項按順序填充到每一行，必要時添加新行。這是grid-auto-flow的缺省值。
column
自動布局算法把網格項按順序填充到每一列，必要時添加新列。
dense
如果指定了dense，將使用“密集”填充算法，它試圖把排在后面的體積小的網格項填充到“大個頭”網格留下的空隙中，就像我們在汽車后備箱塞物品一樣。這有可能會導致填充順序和代碼順序不同。
如果未指定，則將使用“稀疏”填充算法，只是按順序擺放，不回溯填空。這可以確保所有網格項保持原有的代碼序，但有可能會出現頁面空間浪費。
同樣的我們通過 在線實例來學習。其中代碼注釋已經講得很清楚，這里不再重復。
by iefreer

總結

以上是生活随笔為你收集整理的CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)的全部內容，希望文章能夠幫你解決所遇到的問題。

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