葉文全

(閩北職業(yè)技術(shù)學院 信息與工程系，福建 南平 353000)

隨著網(wǎng)站從簡單文檔演變成復雜的交互式應用程序，并需要支持在多種不同尺寸的設(shè)備上運行，網(wǎng)頁布局的需求復雜度也越來越高.傳統(tǒng)的布局解決方案基于盒狀模型，依賴float、position、display屬性實現(xiàn)[1]，難以解決特殊的布局需求(如垂直居中)，網(wǎng)頁布局對HTML的依賴較大，結(jié)構(gòu)和表現(xiàn)的分離不夠徹底.CSS彈性盒子布局(CSS Flexible Box Layout)的出現(xiàn)解決了很多布局問題，可以更加有效地對容器中的子元素進行排列、對齊和分配空白空間，彈性盒子布局適用于一維布局，非常適合組織應用組件和小型布局[2]，但并不能很好地解決二維布局的復雜需求.為了解決復雜的二維布局需求，W3C推出了CSS網(wǎng)格布局(CSS Grid Layout)模塊，該模塊定義了一個二維網(wǎng)格布局系統(tǒng)，可以將網(wǎng)格容器的子節(jié)點指定到任意預定義布局網(wǎng)格的單元格中，這些布局網(wǎng)格可以是靈活的也可以是固定的[3]，真正地實現(xiàn)了結(jié)構(gòu)和表現(xiàn)的分離.

1 CSS網(wǎng)格布局模塊

1.1 網(wǎng)格術(shù)語

CSS網(wǎng)格布局由父元素和子元素兩個核心構(gòu)成.父元素稱之為網(wǎng)格容器(Grid Container)，網(wǎng)格容器通過指定行和列的數(shù)量，使其成為二維的網(wǎng)格容器.網(wǎng)格容器的直接子元素稱之為網(wǎng)格項(Grid Item)，網(wǎng)格容器可以靈活指定網(wǎng)格項在網(wǎng)格容器中的區(qū)域與相關(guān)屬性.

圖1 網(wǎng)格術(shù)語示意圖

除了網(wǎng)格容器與網(wǎng)格項，該模塊還定義了網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格單元格、網(wǎng)格區(qū)域，如圖1所示.

網(wǎng)格術(shù)語描述如下[4]：

網(wǎng)格線：構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線，包括行網(wǎng)格線和列網(wǎng)格線.

網(wǎng)格軌道：兩條相鄰網(wǎng)格線之間的空間.

網(wǎng)格單元格：兩條相鄰的行和兩條相鄰的列網(wǎng)格線之間的空間.

網(wǎng)格區(qū)域：兩條行和兩條列網(wǎng)格線包圍的總空間.

1.2 網(wǎng)格屬性

網(wǎng)格屬性用于控制網(wǎng)格容器和網(wǎng)格項，包括網(wǎng)格容器屬性和網(wǎng)格項屬性.網(wǎng)格容器屬性主要包括如下：

display：將元素定義為網(wǎng)格容器，屬性值包括gird、inline-grid、subgrid.

grid-template-columns：指定網(wǎng)格列數(shù)及寬度，每個值代表一列及列寬，多列使用空格隔開，列寬支持具體值、百分比、等分值.

grid-template-rows：指定網(wǎng)格行數(shù)及高度，每個值代表一行及行高，多行使用空格隔開，行高使用百分比或等分值時，需要指定網(wǎng)格容器高度，否則指定無效.

grid-template-areas：用來指定網(wǎng)格模板，結(jié)合網(wǎng)格項的grid-area一起使用.

grid-template：用于定義grid-template-columns、grid-template-rows、grid-template-areas的縮寫.

grid-column-gap/grid-row-gap：指定列/行網(wǎng)格線的大小.

grid-gap：用于定義grid-column-gap、grid-row-gap的縮寫.

justify-items/align-items：指定網(wǎng)格項水平/垂直對齊方式.

justify-content/align-content：指定所有網(wǎng)格相對網(wǎng)格容器的水平/垂直對齊方式.

grid-auto-columns/grid-auto-rows：指定隱式網(wǎng)格的列寬/行高.超出定義的網(wǎng)格范圍時，隱式網(wǎng)格被創(chuàng)建.

grid-auto-flow：指定自動布局順序，對未明確放置的網(wǎng)格項進行放置.

grid：用于定義grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow的縮寫，同時，還重置grid-gap的初始值.

網(wǎng)格項屬性主要包括如下：

grid-column-start/grid-column-end/grid-row-start/grid-row-end：通過網(wǎng)格線來指定網(wǎng)格項的位置，grid-column-start、grid-row-start是網(wǎng)格項的起始網(wǎng)格線，grid-column-end、grid-row-end是網(wǎng)格項的結(jié)束網(wǎng)格線.

grid-column/grid-row：分別為grid-column-start、grid-column-end和grid-row-start、grid-row-end的縮寫.

grid-area：指定網(wǎng)格項名稱或為grid-column-start/grid-column-end/grid-row-start/grid-row-end的縮寫.當指定網(wǎng)格項名稱時，可以被網(wǎng)格容器屬性grid-template-areas引用.

justify-self/align-self：指定網(wǎng)格項水平/垂直對齊方式，適用于具體網(wǎng)格項的對齊設(shè)置，優(yōu)先級高于網(wǎng)格容器屬性justify-items、align-items.

1.3 網(wǎng)格項放置

在CSS網(wǎng)格布局中，為網(wǎng)格項分配網(wǎng)格區(qū)域提供基于網(wǎng)格線指定和使用grid-template-areas、grid-area結(jié)合基于網(wǎng)格模板指定的兩種方式，下面結(jié)合實例進行研究.

創(chuàng)建一個網(wǎng)格容器，HTML代碼如下：

創(chuàng)建一個3行3列的網(wǎng)格，自動放置網(wǎng)格項，CSS代碼及布局效果如圖2所示.

圖2 自動放置網(wǎng)格項

為了說明CSS網(wǎng)格布局的強大二維布局能力及結(jié)構(gòu)與表現(xiàn)分離的特性，對圖3中的兩種布局效果進行實現(xiàn).

圖3 需要實現(xiàn)的兩種布局效果

1)使用基于網(wǎng)格線的方式實現(xiàn)圖3左側(cè)的布局效果，需要新增CSS代碼：

.item1 {

grid-area:1/1/2/4;/*直接指定起止的行、列網(wǎng)格線，放置網(wǎng)格項*/

}

2)使用基于網(wǎng)格線的方式實現(xiàn)圖3右側(cè)的布局效果，需要新增CSS代碼：

.item1 {grid-area:1/1/2/4;}

.item2 {grid-area:3/1/4/3;}

3)使用基于網(wǎng)格模板的方式實現(xiàn)圖3左側(cè)的布局效果，需要新增CSS代碼：

.item1 {

grid-area:one;/*指定網(wǎng)格項名稱，供網(wǎng)格模板引用*/

}

.wrapper {

grid-template-areas:

"one one one"

"…"

"…"

}

4)使用基于網(wǎng)格模板的方式實現(xiàn)圖3右側(cè)的布局效果，需要新增CSS代碼：

.item1 {grid-area:one;}

.item2 {grid-area:two;}

.wrapper { grid-template-areas:

"one one one"

"…"

"two two."

}

與基于網(wǎng)格線的方式相比，基于網(wǎng)格模板的方式更加直觀，可讀性更強.以上對布局效果的實現(xiàn)，都是基于相同的HTML代碼，不同效果的實現(xiàn)只通過改變CSS進行控制，同時，還突破了HTML元素先后順序的限制.證明了CSS網(wǎng)格布局的強大二維布局能力及結(jié)構(gòu)與表現(xiàn)分離的特性.

2 響應式布局

伴隨著移動端的興起，響應式布局越來越普及.在CSS網(wǎng)格布局模塊中，引入了等分單位、repeat()函數(shù)、minmax()函數(shù)和auto-fit(自適應)，為實現(xiàn)響應式布局提供了更強大的支持.

2.1 使用等分單位實現(xiàn)基本響應式

等分單位由CSS網(wǎng)格布局模塊全新引入，其單位為fr，可以將網(wǎng)格容器劃分成多個等分空間，等分空間會根據(jù)網(wǎng)格容器的大小自動調(diào)整尺寸，從而實現(xiàn)基本的響應式.如果需要根據(jù)網(wǎng)格容器的寬度自動調(diào)整列的數(shù)量，則需要使用auto-fit進行實現(xiàn).

2.2 使用auto-fit實現(xiàn)響應式

auto-fit可以根據(jù)網(wǎng)格容器的寬度及列寬來自動調(diào)整網(wǎng)格容器列的數(shù)量，從而實現(xiàn)更強大的自適應.同時，結(jié)合minmax()函數(shù)控制列寬的區(qū)間，不局限于具體的列寬，得到更好的響應式效果.

下面通過一個實例驗證auto-fit在實現(xiàn)響應式上的表現(xiàn)，HTML代碼同1.3節(jié)，CSS代碼如下：

.wrapper {

display:grid; grid-gap:5px;

/* auto-fit自適應列數(shù)量，minmax指定列寬最小100px,最大1等分 */

grid-template-columns:repeat(auto-fit,minmax(100px,1fr));

grid-template-rows:repeat(3,100px);/* 3行，行高100px */

}

.wrapper > div {

background:#333;color:#fff;text-align:center;

font-size:36px;line-height:100px;

}

圖4 auto-fit實現(xiàn)響應式

其響應式效果如圖4所示.

auto-fit實現(xiàn)的響應式適合應用在列寬相同的場景，不規(guī)則的響應式應用場景還需要使用媒體查詢結(jié)合強大的網(wǎng)格項放置進行實現(xiàn).

2.3 使用媒體查詢實現(xiàn)響應式

媒體查詢允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設(shè)備而定制，而不必改變內(nèi)容本身[5].通過使用媒體查詢結(jié)合CSS網(wǎng)格布局，能夠有效地降低響應式布局難度，提高易用性.

下面通過一個實例驗證媒體查詢結(jié)合CSS網(wǎng)格布局在實現(xiàn)響應式上的表現(xiàn)，HTML代碼同1.3節(jié)，CSS核心代碼及響應式呈現(xiàn)效果如圖5、圖6所示.

圖5 超過1 024像素時的布局效果

圖6 最大寬度1 024像素時的布局效果

通過對圖5、圖6中的CSS代碼及布局效果進行分析，修改網(wǎng)格容器中的網(wǎng)格單元格及網(wǎng)格模板，便可輕松實現(xiàn)響應式布局.

3 瀏覽器支持與布局調(diào)試

3.1 瀏覽器支持

截至目前，根據(jù)Can I Use官網(wǎng)提供的數(shù)據(jù)[6]，主要瀏覽器對CSS網(wǎng)格布局的支持見表1、表2.

表1 桌面端瀏覽器及支持版本

表2 移動端瀏覽器及支持版本

多數(shù)主流瀏覽器都提供了對CSS網(wǎng)格布局的支持.同時，2018年2月6日，W3C工作組發(fā)布了CSS Grid Layout Module Level 2規(guī)范[7].CSS網(wǎng)格布局模塊越來越成熟，在實際項目中廣泛使用只是時間問題.

3.2 布局調(diào)試

CSS網(wǎng)格布局中，網(wǎng)格容器所定義的網(wǎng)格單元格是看不見的，因此，需要有專門的網(wǎng)格檢查器對布局進行調(diào)試.Firefox瀏覽器結(jié)合了網(wǎng)格布局工具，并統(tǒng)一實現(xiàn)為一個獨立的布局面板，其中包括選定的HTML元素的盒模型及相關(guān)CSS屬性，可以幫助開發(fā)者對網(wǎng)格布局進行調(diào)試.

在Firefox瀏覽器中對網(wǎng)格布局進行調(diào)試非常簡單，只需要按F12進入查看器，選擇查看器下的布局，就可以針對所需要的網(wǎng)格布局進行調(diào)試，如圖7所示.

圖7 Firefox網(wǎng)格布局調(diào)試

4 結(jié)語

CSS網(wǎng)格布局是專門為了解決網(wǎng)頁布局問題而創(chuàng)建的CSS模塊，通過對其使用方法及布局能力的研究，驗證了CSS網(wǎng)格布局具備強大的二維布局能力，真正地實現(xiàn)了結(jié)構(gòu)與表現(xiàn)的分離.在響應式的實現(xiàn)上，提供了自適應支持，結(jié)合媒體查詢可以輕松實現(xiàn)復雜的響應式布局.與CSS彈性盒子布局一起使用，綜合二維布局與一維布局的優(yōu)勢，得出新一代的網(wǎng)頁布局解決方案，并在不久的將來得到廣泛應用.