使用CSS3 Grid布局實(shí)現(xiàn)內(nèi)容優(yōu)先

http://www.w3cplus.com/css3/css3-grid-layout-module.html

本文由大漠根據(jù)Rachel Andrew的《Giving Content Priority with CSS3 Grid Layout》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://24ways.org/2012/css3-grid-layout，以及作者相關(guān)信息

——作者：Rachel Andrew

——譯者：大漠

瀏覽器支持許多CSS3的模塊，幫助我們解決我們習(xí)慣于使用圖片的CSS效果。崛起的移動(dòng)瀏覽器和響應(yīng)式網(wǎng)頁設(shè)計(jì)概念給了我們一個(gè)全新的方式來來看待Web設(shè)計(jì)。然而，當(dāng)它們來臨的時(shí)候，我們的布局還沒有跟上。我們已經(jīng)討論了多年的源順序、內(nèi)容也結(jié)構(gòu)和內(nèi)容與樣式的分離。然而，為了得到一定的視覺布局，我們大多數(shù)不得不決定源秩序。

目前，W3C在制作一些一趣的規(guī)范，雖然這些規(guī)范會(huì)不斷的變化，但他們總是在一個(gè)起跑線上變動(dòng)。在這篇文章中，我將向大家介紹CSS的一個(gè)模塊——CSS3網(wǎng)格布局模塊，使我們能夠定義一下網(wǎng)格和放置元素。本文實(shí)示演示基本的網(wǎng)格布局，并討一個(gè)方法，我們可以開始思考的內(nèi)容是具有一個(gè)更多的自適應(yīng)方法。

在我們開始之前，需要特別注意，在撰寫本文的時(shí)候，這些例子只能在IE10上運(yùn)行。CSS3網(wǎng)格布局是由微軟創(chuàng)建的一個(gè)模塊，在使用的時(shí)候需要添加IE10瀏覽器的前綴“-ms-”。我的例子都將使用“-ms-”前綴，而不包括其他瀏覽器的前綴，不僅僅因?yàn)镃SS3 Grid布局模塊還是一個(gè)規(guī)范草案，而且在其他瀏覽器中實(shí)現(xiàn)的效果也可能存在不一致。實(shí)現(xiàn)今天的效果也很有可能會(huì)改變，希望能得到您的反饋。

如果你還沒有IE10瀏覽器，你可以先到Browserstack注冊(cè)一個(gè)賬號(hào)——可以免費(fèi)試用看看。我也把相關(guān)階段的示例截圖放在文章中展示。

什么是CSS3 Grid布局？

CSS3網(wǎng)格布局目的是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。最重要的是文檔流的源順序并不重要。

聲明網(wǎng)格

我們聲明一個(gè)網(wǎng)格是使用“display”的新屬性值：“display:grid”。由于我們這里需要在IE10中實(shí)現(xiàn)，所以我們需要加上前綴：“display:-ms-grid;”。

一旦我們聲明了網(wǎng)格，就可以使用“grid-columns”和“grid-rows”屬性來設(shè)置列與行。

.wrapper {display: -ms-grid; -ms-grid-columns: 200px 20px auto 20px 200px; -ms-grid-rows: auto 1fr; }

在上面的示例中，把“.wrapper”元素聲明成一個(gè)網(wǎng)格。我使用“grid-columns”屬性創(chuàng)建了一個(gè)200像素寬度的列，一個(gè)20像素的間距，一個(gè)根據(jù)可用空間的彈性列，另一個(gè)20像素的間距和200像素的側(cè)邊欄：一個(gè)靈活的布局有兩個(gè)固定寬度的側(cè)邊欄。使用“grid-rows”屬性我創(chuàng)建了兩行：第一行設(shè)置了“auto”，不管是否入內(nèi)容他都將延伸填允；第二行設(shè)置了“1fr”，一個(gè)用于網(wǎng)格的新單位值，他意味著一個(gè)分?jǐn)?shù)單位。在這種情況之下，一個(gè)分?jǐn)?shù)單位的可用空間，不管空間是否存在都是有效的。

網(wǎng)格項(xiàng)目定位

現(xiàn)在有一個(gè)簡單的網(wǎng)格，我需要把內(nèi)容放上去。假如我有一個(gè)類名叫“.mian”的div，我想把他放在網(wǎng)格的第二行和設(shè)置了auto值的列，我可以使用下面的樣式：

.main {-ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 1; }

如果你是一個(gè)老的開發(fā)人員，你可能已經(jīng)意識(shí)到，我們其實(shí)是使用CSS創(chuàng)建了一個(gè)類似于HTML的表格布局。如果你想嘗試找到對(duì)應(yīng)的元素，你可以把網(wǎng)格布局當(dāng)作一個(gè)表格的概念，這是最有益的方法。

創(chuàng)建網(wǎng)格系統(tǒng)

當(dāng)我們開始玩CSS3網(wǎng)格布局時(shí)，我想看看我能否用它來復(fù)制一個(gè)類似于960流體16列網(wǎng)格系統(tǒng)這樣的一個(gè)靈活的網(wǎng)格系統(tǒng)。

我先把容器wrapper元素定義成一個(gè)網(wǎng)格容器，使用分?jǐn)?shù)讓這個(gè)網(wǎng)格變成流體網(wǎng)格。

.wrapper { width: 90%; margin: 0 auto 0 auto; display: -ms-grid; -ms-grid-columns: 1fr (4.25fr 1fr)[16]; -ms-grid-rows: (auto 20px)[24]; }

我舉的實(shí)例類似于960網(wǎng)格系統(tǒng)。網(wǎng)格每一列前后有一個(gè)間距，然后按這樣的方式重復(fù)16次。這就意味著，如果我想要跨越兩列，在網(wǎng)格布局模塊中而言，實(shí)際上是跨越了三個(gè)列：兩個(gè)單元格再加上一個(gè)間距。所在在項(xiàng)目定位時(shí)要明確指定。

我為每個(gè)定位選項(xiàng)創(chuàng)建了一個(gè)類名：列、行和間距，例如：

.grid1 {-ms-grid-column: 2;} /* applying this class positions an item in the first column (the gutter is column 1) */ .grid2 {-ms-grid-column: 4;} /* 2nd column - gutter|column 1|gutter */ .grid3 {-ms-grid-column: 6;} /* 3rd column - gutter|column 1|gutter|column2|gutter */ .row1 {-ms-grid-row:1;} .row2 {-ms-grid-row:3;} .row3 {-ms-grid-row:5;} .colspan1 {-ms-grid-column-span:1;} .colspan2 {-ms-grid-column-span:3;} .colspan3 {-ms-grid-column-span:5;}

我可以為每個(gè)元素添加多類名用來設(shè)置元素在網(wǎng)格上的位置。

我使用CSS3網(wǎng)格布局復(fù)制的一個(gè)流體網(wǎng)格。請(qǐng)啟用IE10，才能正常瀏覽這個(gè)示例。

在線查看示例

可以工作，但...

這個(gè)可以工作，但并不理想。我認(rèn)為我的測試在這個(gè)階段是不顯示，然而，我認(rèn)為它清楚的顯示了網(wǎng)格布局模塊工作的特點(diǎn)，這是一個(gè)有用的開始。不過，這在生產(chǎn)中這也不是一個(gè)方法。首先我們必須對(duì)我們的標(biāo)記定義類名，然后定位到一個(gè)網(wǎng)格的位置上。如果我們總是要操持16列網(wǎng)格，這可能不是太大的問題。我將告訴你，真正強(qiáng)大的網(wǎng)格布局模塊是基于不同的媒體查詢使用網(wǎng)格布局，他自己就能開始重新定義網(wǎng)格。如果在小顯屏下使用6列布局，那么16列網(wǎng)格定位元素就沒有任何的意義。

使用LESS定義網(wǎng)格的位置

正如我們所看到的，如果你想使用一個(gè)主列和間距定義一個(gè)網(wǎng)格，你必須考慮到列間距和一個(gè)實(shí)際列。這就意味著，我們?yōu)槊恳粋€(gè)項(xiàng)目上網(wǎng)格都不得不做一些計(jì)算。在上面的示例中，為每個(gè)位置創(chuàng)建了一個(gè)類名，讓我覺得我們應(yīng)該是在16列內(nèi)而不是32列。但通過使用CSS預(yù)處理程序，我們可以避免使用所有列，只要認(rèn)為是在主列中。

在我的示例中，我使用了LESS。 我的簡單網(wǎng)格框架由一個(gè)簡單的mixin來完成。

/*----------------------------------------------------------------*\* 1、使用LESS定義一個(gè)mixin,名叫.position，定義方法類似定義一個(gè)類* 2、 @column定義列* 3、 @row定義行 * 4、 @colspan跨越的列 * 5、 @rowspan跨越的行 \*----------------------------------------------------------------*/ .position(@column,@row,@colspan,@rowspan) { -ms-grid-column: @column*2; -ms-grid-row: @row*2-1; -ms-grid-column-span: @colspan*2-1; -ms-grid-row-span: @rowspan*2-1; }

我的mixin包含四個(gè)參數(shù)：列、行、跨越的列和跨越的行。如果我想把一個(gè)項(xiàng)目放在列四、行三、跨越兩個(gè)列和一行。我們可以像下面一樣寫CSS樣式：

.box {.position(4,3,2,1); }

mixin轉(zhuǎn)譯出來：

.box {-ms-grid-column: 8; -ms-grid-row: 5; -ms-grid-column-span: 3; -ms-grid-row-span: 1; }

這樣讓我們少打很多字與做一些數(shù)學(xué)計(jì)算。也可以添加瀏覽器的前綴到mixin中，就像一開始就做了瀏覽器兼容處理。

我們可以看到，這回創(chuàng)建了一個(gè)新的網(wǎng)格。不是對(duì)每個(gè)元素添加多個(gè)類，而是添加一個(gè)類，這個(gè)類使用了mixin創(chuàng)建需要的位置。我一直在mixin中使用跨行，你可以看到我最后制作了一個(gè)相當(dāng)復(fù)雜的網(wǎng)格布局。我使用了JavaScrpt LESS解析器，這樣您就可以查看我使用的LESS。注意，為了避免使用-ms的前綴，在LESS代碼中實(shí)際使用了“~”來代替。

看起來很棒。在模板中沒有為每個(gè)元素定認(rèn)指定太多信息，我僅用了一個(gè)類名——grid(x)，但可能會(huì)有更符合語義化地類名。我們現(xiàn)在可以進(jìn)一步的擴(kuò)展這個(gè)例子，就是根據(jù)屏幕寬度重新定義網(wǎng)格。

示例代碼

為了節(jié)省大家的時(shí)間，我特意將其代碼扣出放在這里，以供大家參考：

HTML結(jié)構(gòu)

<div class="wrapper"><div class="box grid1">01</div> <div class="box grid2">02</div> <div class="box grid3">03</div> <div class="box grid4">04</div> <div class="box grid5">05</div> <div class="box grid6">06</div> <div class="box grid7">07</div> <div class="box grid8">08</div> <div class="box grid9">09</div> <div class="box grid10">10</div> <div class="box grid11">11</div> <div class="box grid12">12</div> <div class="box grid13">13</div> <div class="box grid14">14</div> <div class="box grid15">15</div> <div class="box grid16">16</div> <div class="box grid17">17</div> <div class="box grid18">18</div> <div class="box grid19">19</div> <div class="box grid20">20</div> <div class="box grid21">21</div> <div class="box grid22">22</div> <div class="box grid23">23</div> <div class="box grid24">24</div> <div class="box grid25">25</div> <div class="box grid26">26</div> <div class="box grid27">27</div> <div class="box grid28">28</div> <div class="box grid29">29</div> <div class="box grid30">30</div> <div class="box grid31">31</div> <div class="box grid32">32</div> <div class="box grid33">33</div> <div class="box grid34">34</div> <div class="box grid35">35</div> <div class="box grid36">36</div> <div class="box grid37">37</div> <div class="box grid38">38</div> <div class="box grid39">39

轉(zhuǎn)載于:https://www.cnblogs.com/dsheldon/p/4387257.html

總結(jié)

以上是生活随笔為你收集整理的[转]使用CSS3 Grid布局实现内容优先的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。