使用CSS3 Grid布局實現內容優先

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

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

——作者：Rachel Andrew

——譯者：大漠

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

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

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

如果你還沒有IE10瀏覽器，你可以先到Browserstack注冊一個賬號——可以免費試用看看。我也把相關階段的示例截圖放在文章中展示。

什么是CSS3 Grid布局？

CSS3網格布局目的是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上你將一個元素聲明為一個網格容器，并把元素內容置于網格中。最重要的是文檔流的源順序并不重要。

聲明網格

我們聲明一個網格是使用“display”的新屬性值：“display:grid”。由于我們這里需要在IE10中實現，所以我們需要加上前綴：“display:-ms-grid;”。

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

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

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

網格項目定位

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

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

如果你是一個老的開發人員，你可能已經意識到，我們其實是使用CSS創建了一個類似于HTML的表格布局。如果你想嘗試找到對應的元素，你可以把網格布局當作一個表格的概念，這是最有益的方法。

創建網格系統

當我們開始玩CSS3網格布局時，我想看看我能否用它來復制一個類似于960流體16列網格系統這樣的一個靈活的網格系統。

我先把容器wrapper元素定義成一個網格容器，使用分數讓這個網格變成流體網格。

.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]; }

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

我為每個定位選項創建了一個類名：列、行和間距，例如：

.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;}

我可以為每個元素添加多類名用來設置元素在網格上的位置。

我使用CSS3網格布局復制的一個流體網格。請啟用IE10，才能正常瀏覽這個示例。

在線查看示例

可以工作，但...

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

使用LESS定義網格的位置

正如我們所看到的，如果你想使用一個主列和間距定義一個網格，你必須考慮到列間距和一個實際列。這就意味著，我們為每一個項目上網格都不得不做一些計算。在上面的示例中，為每個位置創建了一個類名，讓我覺得我們應該是在16列內而不是32列。但通過使用CSS預處理程序，我們可以避免使用所有列，只要認為是在主列中。

在我的示例中，我使用了LESS。 我的簡單網格框架由一個簡單的mixin來完成。

/*----------------------------------------------------------------*\* 1、使用LESS定義一個mixin,名叫.position，定義方法類似定義一個類* 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包含四個參數：列、行、跨越的列和跨越的行。如果我想把一個項目放在列四、行三、跨越兩個列和一行。我們可以像下面一樣寫CSS樣式：

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

mixin轉譯出來：

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

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

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

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

示例代碼

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

HTML結構

<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

轉載于:https://www.cnblogs.com/dsheldon/p/4387257.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。