以下討論的是和CSS3 網(wǎng)站架構(gòu) 網(wǎng)格 布局 相關(guān)的通過CSS3進(jìn)行網(wǎng)站架構(gòu)網(wǎng)格布局的代碼實(shí)例教程教程文章，內(nèi)容是本站精心挑選整理的教程，希望對(duì)廣大的網(wǎng)友給到幫助,下面是詳細(xì)內(nèi)容：
| 文章簡介：CSS3網(wǎng)格布局模塊的一個(gè)任務(wù)是幫助我們處理非常簡單和清晰的任何web-imposer（不僅），很有可能是一個(gè)內(nèi)容塊在一個(gè)虛擬的網(wǎng)絡(luò)位置。 |
前言
在我看來，CSS3模塊家族中，CSS3網(wǎng)格布局模塊是最有趣的一個(gè)。W3C官網(wǎng)自發(fā)布草案到今天不到一年時(shí)間。有一點(diǎn)必須注意，早在2007年 宣布的WD版本中，有些名稱和語法有一些變化，但是他們具有相同的本質(zhì)。今天模塊正在前速向前，在IE10中已經(jīng)初步實(shí)現(xiàn)，希望新的特性在將來能得到支持以及其他流行瀏覽器也將支持這個(gè)模塊。
CSS3網(wǎng)格布局模塊的一個(gè)任務(wù)是幫助我們處理非常簡單和清晰的任何web-imposer（不僅），很有可能是一個(gè)內(nèi)容塊在一個(gè)虛擬的網(wǎng)絡(luò)位置。
與舊的表格方法相比，表格是基于一個(gè)使用的表，這里的具有清晰的文檔語義和內(nèi)容與結(jié)構(gòu)的分離。在一個(gè)模板中使用不同的結(jié)構(gòu)標(biāo)簽，使用多個(gè)浮動(dòng)和手動(dòng)計(jì)算實(shí)現(xiàn)一個(gè)布局是困難的，這里介紹的方法變得非常簡單和清晰。與絕對(duì)定位相比，網(wǎng)格更具靈活性。與當(dāng)今天流行的CSS/JS庫相比，這些庫使用網(wǎng)格都需要指定相應(yīng)的類名（作為一個(gè)示例，比如bootstrap和yui css grids），而在網(wǎng)格布局模塊中是不需要額外增添這些類名。
太爽了！現(xiàn)在就等瀏覽器廣泛的支持了。然而，如果你想去做一個(gè)Win8那樣Metro風(fēng)格的應(yīng)用，還在使用HTML/JS，更為關(guān)鍵的是，你可使用CSS3網(wǎng)格布局模塊來制作布局，這樣可以兼容移動(dòng)端，使用簡單，而且實(shí)用。
首先讓我們從示例中了解網(wǎng)格布局。想像一下，你需要制作一個(gè)經(jīng)典的三列布局，這樣的布局大約需要一個(gè)以下的標(biāo)記：
<section> <header>Title</header> <nav>Menu</nav> <article>Content</article> <aside>Notes</aside> <footer>Footer</footer> </section>
我們需要一個(gè)如下圖所示的三列布局：
這是一個(gè)經(jīng)典的布局，因此我們將不太關(guān)注傳統(tǒng)的方法實(shí)現(xiàn)這個(gè)多列布局采用的是什么標(biāo)記。我們關(guān)注的是使用CSS3網(wǎng)格布局我們能做些什么？（在個(gè)實(shí)例中，我跳過了瀏覽器前綴，在實(shí)踐中應(yīng)該為例子添加IE的前綴“-ms-”）。
下面是這個(gè)例子中使用的CSS代碼：
section { display: -ms-grid; grid-columns: 150px 1fr 200px; grid-rows: 50px 1fr 50px; } section header { grid-column: 2; grid-row: 1; } section nav { grid-column: 1; grid-row: 2; } section article { grid-column: 2; grid-row: 2; } section aside { grid-column: 3; grid-row: 2; } section footer { grid-column: 2; grid-row: 3; } 你要指定一個(gè)容器（section）為網(wǎng)格，里面的內(nèi)容都位于網(wǎng)格上和使用grid-columns、grid-rows屬性設(shè)置一個(gè)虛擬網(wǎng)格（下面會(huì)介紹這些屬性的作用）。進(jìn)一步我們應(yīng)該為容器內(nèi)的元素指定位置。
整個(gè)包括：
現(xiàn)在讓我們來看看這些細(xì)節(jié)和更多的可能性。
為了能放置元素，需要?jiǎng)?chuàng)建一個(gè)虛擬網(wǎng)格。因此我們有必要的描述一下網(wǎng)格軌跡中的行和列：
#grid { display: grid; grid-columns: 150px 1fr; /* 兩列 */ grid-rows: 50px 1fr 50px; /* 三行 */ } 網(wǎng)格軌道介于兩網(wǎng)格線之間，圍著他自身轉(zhuǎn)，每個(gè)網(wǎng)格軌道在他自身的上面、下面、左面和右面都有一個(gè)網(wǎng)格線。
如何設(shè)置元素放置在網(wǎng)格哪個(gè)位置，需要明確指定從哪條水平線和垂直線開始。
#item { grid-column: 2; grid-row: 2; } 
默認(rèn)情況之下，元素占據(jù)的空間都是在指定的網(wǎng)格線之下。（這樣看起來像是數(shù)單元格數(shù)一樣，我們?cè)鼐皖愃品胖迷趩卧裰校?/p>
擴(kuò)展元素占據(jù)幾個(gè)網(wǎng)格單元格，我們一般都是使用grid-now-span和grid-column-span屬性來實(shí)現(xiàn)：
#item { grid-column: 2; grid-column-span: 3; grid-row: 2; grid-row-span:2; } 
默認(rèn)情況，這兩個(gè)屬性的值都是“1”。可以根據(jù)需求在這上面進(jìn)行擴(kuò)展。
經(jīng)常根據(jù)容器結(jié)構(gòu)模板需要選擇網(wǎng)格。
#grid { display: grid; grid-columns: 24px 120px 24px 120px 24px 120px 24px 120px 24px; grid-rows: 1fr 24px 1fr 24px 1fr 24px; } 
它將更清楚的描述一個(gè)更清晰的網(wǎng)格，上面的例子我們可以用這樣的方法來描述：
#grid { display: grid; grid-columns: 24px (120px 24px)[4]; grid-rows: (1fr 24px)[3]; } 模板本身的參數(shù)放在括號(hào)中，后面用方括號(hào)指定重復(fù)的次數(shù)。
現(xiàn)在，當(dāng)我們知道網(wǎng)格線的基本描述，接下來我們?cè)俅位氐骄W(wǎng)格的軌道和嘗試?yán)斫庖恍┚唧w的度量單位。
正如你所注意到的，這里使用一個(gè)特殊的單位為指定一些列和行的大小——1fr。現(xiàn)在，我們將討論這個(gè)和其他可能的值用來指定長度。
在描述列寬和行高，可以使用下面的單位和值：
讓我們?cè)囍斫猓謹(jǐn)?shù)值是如何工作的？一個(gè)網(wǎng)格占據(jù)了一定寬度和高度的空間。這可能取決于內(nèi)容，嚴(yán)格上說是固定的或占據(jù)所外部容器所有可以訪問的空間。進(jìn)一步的說，你的網(wǎng)格軌道的列數(shù)和行數(shù)是可以明顯設(shè)置的。如何設(shè)置他們的尺寸，對(duì)于其他的一些部分取決于內(nèi)容的長度。
現(xiàn)在我們?cè)L問了一個(gè)網(wǎng)格容器，他的橫向和縱向的寬度減去內(nèi)容的寬度和高度。額外的空間按照數(shù)值的比例進(jìn)行劃分。
在上面的示例中，顯示了三列按寬度的2:1:1和兩行按高度的5:2劃分列寬度和行高度。
從規(guī)范草案中復(fù)制過來的一個(gè)示例，讓我看到不同類型的關(guān)鍵詞和值：
#grid { display: grid; grid-columns: 100px 1fr max-content minmax(min-content, 1fr) } 具體描述如下：
這里有細(xì)微的差別，用戶內(nèi)部出現(xiàn)最大和小值，他們正在考慮一個(gè)分?jǐn)?shù)值作為最大位置。分?jǐn)?shù)標(biāo)志著最低的位置被認(rèn)為是等于0，詳細(xì)的細(xì)節(jié)請(qǐng)參考規(guī)范。
下一步我們將試圖找出元素代替它們位置之間的網(wǎng)格線（網(wǎng)格內(nèi)的單元格）。
現(xiàn)在，把元素綁定到網(wǎng)格行中會(huì)出現(xiàn)一個(gè)問題：他們是如何放在網(wǎng)絡(luò)線之間？
綁定元素在網(wǎng)格的邊緣是依靠grid-column-align和grid-row-align屬性來控制的。他們的屬性值主要包括：
這些值從名稱上就告訴我們他們的展示行為是什么。我只會(huì)注意到，在每個(gè)案例的問題是關(guān)于定位元素與其容器之間的距離。這兩個(gè)屬性的默認(rèn)值是stretch，表示拉伸元素至容器一樣大小。
元素綁定在列（水平方向）對(duì)應(yīng)的是文本方向（例如一些阿拉伯語，是從右邊開始到左邊結(jié)束）。元素綁定在行（垂直方向）對(duì)應(yīng)是塊的方向（順便說一句，這意味著一些東亞語言，行和列可以改變他們的位置）。
下一個(gè)重點(diǎn)來了，元素的位置在網(wǎng)格內(nèi)如何布置。如果兩個(gè)元素都綁定在同一行中，或者擴(kuò)展排列到相同的單元格，那么會(huì)發(fā)生些什么？
最重要的需要理解一些細(xì)微的差別，元素放置在網(wǎng)格中不會(huì)直接影響彼此的位置。如果你將十個(gè)元素都綁定到網(wǎng)格的水平方向第二條網(wǎng)格線和垂直方向第三條網(wǎng)格線起始處。那么默認(rèn)情況他們都將取代他們的位置，層疊放在一起。每個(gè)元素都綁定到網(wǎng)格相對(duì)應(yīng)的角落。這些元素可以影響的只有網(wǎng)格軌道，如果他們被綁定，那么它將會(huì)影響內(nèi)容的尺寸。
要控制這些層的顯示順序，當(dāng)前規(guī)范版本使用的是z-index屬性，允許管理網(wǎng)格內(nèi)元素的層級(jí)。
備注：在基于ie10的前一個(gè)版本規(guī)范，使用一個(gè)grid-layer屬性來指定網(wǎng)格內(nèi)元素層級(jí)關(guān)系，而沒有使用z-index。然而，進(jìn)一步的討論過程中，工作組決定重新考慮使用z-index這個(gè)屬性。
看一個(gè)例子：
#grid { display: grid; grid-columns: (1fr)[3]; grid-rows: (1fr)[4]; } #A { grid-column:1; grid-row:3; grid-column-span:2; } #B { grid-column:1; grid-row:1; grid-row-span:2; /* grid-layer: 10; */ z-index:10; margin-top:10px; } #C { grid-column:1; grid-row:1; grid-column-span:2; margin-left:50px; } #D { grid-column:2; grid-row:3; grid-row-span:2; grid-column-span:2; margin:10px 0 0 10px; } #E { grid-column:2; grid-row:2; /* grid-layer: 5; */ z-index:5; margin: -20px; } 
到目前為止，僅在IE10+的瀏覽器可以支持網(wǎng)格布局模塊，其他瀏覽器還不支持。但是它可以使用js庫eCSStender和擴(kuò)展的網(wǎng)格對(duì)齊，他們支持下面的屬性：
可以查看這個(gè)實(shí)例。
最后，讓我們稍微了解一下，CSS3網(wǎng)格布局模塊在未來會(huì)有哪些的變化。
以下提到的可能性是在草稿規(guī)范中提到的，但現(xiàn)在還沒有瀏覽器支持這些特性。將來能否支持取決于W3C組織。
可以對(duì)元素占據(jù)的網(wǎng)格的開始網(wǎng)格線，還可以指定他們的結(jié)束網(wǎng)格線：
#item { grid-column: 2; grid-row: 2 4; } 
和“span”機(jī)制不一樣，他指定了一個(gè)元素在水平方向和垂直方向必須跨越多少單元格，可以明確的為元素指定從哪行開始到哪行結(jié)束。它也可以輕松的使用網(wǎng)格線名稱。
為了方便行，可能會(huì)為其命名。它是通過在適當(dāng)?shù)奈恢貌迦胱址担脕砻枋鼍W(wǎng)格軌道。（如果實(shí)際需要，可以定義向個(gè)名稱，比如說從語義的角度出發(fā)，定義不同的名稱）：
#grid { display: grid; grid-columns: "nav" "first" 150px "content" 1fr "last"; grid-rows: "header" 50px "content" 1fr "footer" 50px; } 在元素上可以引用這些名稱：
#menu { grid-column: "nav"; grid-row: "content"; } #header { grid-column: "content"; grid-row: "header"; } #article { grid-column: "content"; grid-row: "content"; } 
還有一個(gè)規(guī)范，預(yù)先命名了四個(gè)網(wǎng)格線名稱——垂直和水平方現(xiàn)的start和end，實(shí)際上他們構(gòu)建了整個(gè)網(wǎng)格。例如，導(dǎo)航菜單在第一列，從第一行到最后一行，而footer元素從第二列到最后一列，不需要統(tǒng)計(jì)有多少行和多少列，就可以實(shí)現(xiàn)。
#menu { grid-column: 1; grid-row: start end; } #footer { grid-column: 2 end; grid-row: 3; } 
將來還有另一個(gè)方法，可以給單元格根據(jù)模板元素名稱命名，用以創(chuàng)建一個(gè)虛擬結(jié)構(gòu)模板：
#grid { display: grid; grid-template: "ln" "ma" "ba" "ff"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; } 
因此，將一個(gè)元素綁定到一個(gè)或另一個(gè)虛擬的網(wǎng)格中也可以使用這樣的規(guī)則：
#article { grid-cell: "a"; } 如果根據(jù)不同的條件，比如說根據(jù)屏幕分辨率改變?cè)氐奈恢茫踔粮淖兙W(wǎng)格本身。那么這種方法是很爽的：
@media (orientation: portrait) { #grid { display: grid; grid-template: "ln" "ma" "ba" "ff"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; } } @media (orientation: landscape) { #grid { display: grid; grid-template: "ln" "ma" "mb" "sf"; grid-columns: auto minmax(min-content, 1fr); grid-rows: auto minmax(min-content, 1fr) auto auto; } } #a grid-cell: "a"; } 
注意，本文用來命名單元格的名稱不會(huì)改變。（雖然現(xiàn)在還無法使用這些屬性，但我們會(huì)等到瀏覽器支持這些特性）。
在這篇文章中，我想嘗試給大家介紹CSS3網(wǎng)格布局模塊關(guān)鍵部分。我希望可以激勵(lì)大家知道的比我多。
我將提醒大家，模塊在不斷的更新，W3C組織在不斷的收集評(píng)論和修改意見。在Internet Explorer 10中可以看到一些基本功能的實(shí)現(xiàn)。這里提供了幾個(gè)有興的例子:ietestdrive.com:The Grid System和Hands On: CSS3 Grid Layout。
我也會(huì)繼續(xù)觀注CSS3網(wǎng)格布局模塊的更新，現(xiàn)在支持網(wǎng)格布局模塊的游覽器只有IE10，也有可能將來會(huì)使用網(wǎng)格布局模塊和HTML/JS來開發(fā)Windows8的Metro風(fēng)格。
譯者手語：整個(gè)翻譯依照原文線路進(jìn)行，并在翻譯過程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！
如需轉(zhuǎn)載煩請(qǐng)注明出處：
英文原文：http://www.splashnology.com/article/introduction-into-css3-grid-layout-workingwith-grids/5762/
End. 教程到這里講完了，閱讀是否有所收獲呢？本站還提供有CSS3 網(wǎng)站架構(gòu) 網(wǎng)格 布局 相關(guān)的內(nèi)容，歡迎繼續(xù)閱讀。
新聞熱點(diǎn)
疑難解答
圖片精選
