基于CSS網(wǎng)格布局的新一代網(wǎng)頁(yè)布局方法研究

葉文全

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

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

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

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

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

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

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

網(wǎng)格術(shù)語(yǔ)描述如下[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)格項(xiàng)，包括網(wǎng)格容器屬性和網(wǎng)格項(xiàng)屬性.網(wǎng)格容器屬性主要包括如下：

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

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

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

grid-template-areas：用來(lái)指定網(wǎng)格模板，結(jié)合網(wǎng)格項(xià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)格項(xiàng)水平/垂直對(duì)齊方式.

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

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

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

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

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

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

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

grid-area：指定網(wǎng)格項(xiàng)名稱或?yàn)間rid-column-start/grid-column-end/grid-row-start/grid-row-end的縮寫.當(dāng)指定網(wǎng)格項(xiàng)名稱時(shí)，可以被網(wǎng)格容器屬性grid-template-areas引用.

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

1.3 網(wǎng)格項(xiàng)放置

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

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

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

圖2 自動(dòng)放置網(wǎng)格項(xiàng)

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

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

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

.item1 {

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

}

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

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

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

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

.item1 {

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

}

.wrapper {

grid-template-areas:

"one one one"

"…"

"…"

}

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

2 響應(yīng)式布局

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

2.1 使用等分單位實(shí)現(xiàn)基本響應(yīng)式

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

2.2 使用auto-fit實(shí)現(xiàn)響應(yīng)式

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

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

.wrapper {

display:grid; grid-gap:5px;

/* auto-fit自適應(yīng)列數(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實(shí)現(xiàn)響應(yīng)式

其響應(yīng)式效果如圖4所示.

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

2.3 使用媒體查詢實(shí)現(xiàn)響應(yīng)式

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

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

圖5 超過(guò)1 024像素時(shí)的布局效果

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

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

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

3.1 瀏覽器支持

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

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

表2 移動(dòng)端瀏覽器及支持版本

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

3.2 布局調(diào)試

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

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

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

4 結(jié)語(yǔ)

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