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

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

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

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

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

HTML

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