HTML文檔中有文檔流，其實在CSS Grid Layout中有網格流。簡單點理解就是，在一個被顯式聲明為網格的容器中，其所有子元素自動被認定為網格單元格，而這些網格單元格在沒有被顯式設置明確位置時，瀏覽器將會自動為這些網格單元格的位置進行計算，按照先后順序從左向右，或從上到下排列。在這里把這種方式稱之為網格的流動。

在具體介紹網格流動相關內容之前，我們先一起來回憶一個簡單的效果。平時在Web頁面制作當中，經常會碰到產品列表展示頁面，或者說相冊展示頁面的效果。如下圖所示：

實現上圖的效果，大家平時大多會采用float和display:inline-block等方法實現。但這些方法或多或少存在一定的局限性。那么在CSS Grid Layout中，實現這樣的布局相對而言會簡單多。比如通過網格線，或者網格區域來明確指定各自的位置。不過這樣一來，就存在一個潛在的問題：如果在不同的設備上瀏覽，每行展示的數量不一致時，需要在媒體查詢中為每個網格重新指定位置，這變得更為復雜。也不是我們希望的效果。其實在網格布局中還有一種更方便的方法，就是采用網格流來實現。這也是我們今天要說的內容 。

在CSS Grid Layout中，給元素顯式的聲明網格，如果沒有顯式的通過網格線或者網格區域明確指定網格的位置，那么瀏覽器將會對容器內子元素（網格單元格）進行自動布局。

來看一個簡單的示例，假設容器.wrapper中有14個.box(A~O)。容器.wrapper顯示的聲明為網格，并且不對任何.box做顯式的位置定位，這個時候瀏覽器會自動為.box進行自動布局。為了更好的看到效果，在這個示例中給偶數的.box設置了一個green背景色：

HTML

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表