使用CSS Grid布局實現(xiàn)網(wǎng)格的流動

HTML文檔中有文檔流,其實在CSS Grid Layout中有網(wǎng)格流。簡單點理解就是,在一個被顯式聲明為網(wǎng)格的容器中,其所有子元素自動被認定為網(wǎng)格單元格,而這些網(wǎng)格單元格在沒有被顯式設置明確位置時,瀏覽器將會自動為這些網(wǎng)格單元格的位置進行計算,按照先后順序從左向右,或從上到下排列。在這里把這種方式稱之為網(wǎng)格的流動。
在具體介紹網(wǎng)格流動相關(guān)內(nèi)容之前,我們先一起來回憶一個簡單的效果。平時在Web頁面制作當中,經(jīng)常會碰到產(chǎn)品列表展示頁面,或者說相冊展示頁面的效果。如下圖所示:
實現(xiàn)上圖的效果,大家平時大多會采用float
和display:inline-block
等方法實現(xiàn)。但這些方法或多或少存在一定的局限性。那么在CSS Grid Layout中,實現(xiàn)這樣的布局相對而言會簡單多。比如通過網(wǎng)格線,或者網(wǎng)格區(qū)域來明確指定各自的位置。不過這樣一來,就存在一個潛在的問題:如果在不同的設備上瀏覽,每行展示的數(shù)量不一致時,需要在媒體查詢中為每個網(wǎng)格重新指定位置,這變得更為復雜。也不是我們希望的效果。其實在網(wǎng)格布局中還有一種更方便的方法,就是采用網(wǎng)格流來實現(xiàn)。這也是我們今天要說的內(nèi)容 。
在CSS Grid Layout中,給元素顯式的聲明網(wǎng)格,如果沒有顯式的通過網(wǎng)格線或者網(wǎng)格區(qū)域明確指定網(wǎng)格的位置,那么瀏覽器將會對容器內(nèi)子元素(網(wǎng)格單元格)進行自動布局。
來看一個簡單的示例,假設容器.wrapper
中有14個.box
(A~O)。容器.wrapper
顯示的聲明為網(wǎng)格,并且不對任何.box
做顯式的位置定位,這個時候瀏覽器會自動為.box
進行自動布局。為了更好的看到效果,在這個示例中給偶數(shù)的.box
設置了一個green
背景色:
HTML
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
<div class="box n">N</div>
<div class="box o">O</div>
</div>
CSS
.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
}
.box:nth-child(even){
background: green;
}
.wrapper {
width: 500px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;</p> <p> display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: auto ;
}
效果如下:
不過離文章所示效果還是略有差距,每個.box
之間沒有間距,我嘗試著給.box
設置margin
值:
從效果圖中可以明顯看出,盒模型解析已做出變化:
上圖中可以得知,在CSS Grid Layout中盒模型大小計算變成:容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width
。比如我們這個示例中,.box
設置width:100px
,并且有一個margin-right:15px;
那實際上.box
的內(nèi)容寬度僅只有85px
。這樣一來與文章開頭示例相左,如果需要做到一致效果,還需對其做一定的變化。這個變化就是對容器.wrapper
的寬度和grid-template-columns
屬性值:
<font face="Courier New">.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(5, 115px);
grid-template-rows: auto ;
}</font>
</font>
效果如下:
或許你會感覺這并沒有強大到哪呀,跟以前使用float
有太多的變化嗎?如果你覺得沒有,那請繼續(xù)往下閱讀。
網(wǎng)格的自動流,在默認情況下都是以行來給元素布局,也就是說grid-auto-flow
取值為row
。讓網(wǎng)格單元格沿著行布局,直到?jīng)]有可放區(qū)域(列的方向),網(wǎng)格單元格會自動換行到下一行排列。哪怕沒有顯式的聲明網(wǎng)格,瀏覽器也會為創(chuàng)建隱式網(wǎng)格的軌道,用來放自網(wǎng)格單元格。
在實際使用中,可以使用grid-auto-flow
屬性來做修改,只需要把其默認值row
設置成column
。網(wǎng)格中的單元將會按列顯示,如果需要,還會自動添加列。
一起來看一個示例,你將更易理解:
.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(6, 115px);
grid-template-rows: 115px 115px 115px;
grid-auto-flow: column;
}
效果如下:
前兩介紹的都是網(wǎng)格容器所有子元素都是按照網(wǎng)格自動流排列。從上面簡單的示例中可以得知,只要是網(wǎng)格容器中的子元素,通過grid-auto-flow
都可以讓其在網(wǎng)格容器中按列,或按行自動排列??赏行r候,有些網(wǎng)格需要做一些特殊定位處理。如果其中某個或某幾個網(wǎng)格做了特殊處理,那么其他網(wǎng)格還會自動排列?我們將帶著這個問題來一起看一個簡單的示例:
效果如下:
在這個示例中,盒子.b
,通過網(wǎng)格線,將B
重新定位新位置上,但這樣并沒有影響網(wǎng)格的自動流。.b
所在的默認位置將由其后面的.c
元素補上。同樣的,.f
元素重新定位后,別的元素補上。而且.f
擴展占有多個網(wǎng)格單元格,那么其他的單元格就會自動往后移。如上圖所示。
文章中通過簡單示例向大家演示了CSS Grid Layout中網(wǎng)格單元格自動排列的實現(xiàn)方法,以及如何通過grid-auto-flow
來顯式設置自動排列的方向。最后用一個示例向大家展示了,自動排列的網(wǎng)格中,其中某個或某向個網(wǎng)格單元格顯式定位后,是否會對網(wǎng)格自動流造成一定的影響。不過如果你看到最后一個示例時,你將不會再質(zhì)問這個問題。因為效果告訴你一切。
另外網(wǎng)格自動流配合margin
和媒體查詢將能更好實現(xiàn)Web中相冊相關(guān)布局,產(chǎn)品展示相關(guān)布局。當然你也還可以在這個基礎上擴展出更有意義的布局效果。
相關(guān)文章
- 本文通過各種實例向大家闡述CSS Grid布局,讓我們一起領(lǐng)略其強大的魅力,需要的朋友可以參考下2014-12-30
CSS Grid布局教程之瀏覽器開啟CSS Grid Layout匯總
在這篇文章中,主要向大家介紹如何讓自己的瀏覽器支持CSS Grid Layout模塊功能,需要的朋友可以參考下2014-12-30- 在這篇文章中簡單的介紹了CSS Grid Layout,以及為什么要使用他,并且介紹了其一些術(shù)語:網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格單元格、網(wǎng)格區(qū)域和網(wǎng)格容器等,為后面如何學習和使用CSS G2014-12-30
- 采用如下的樣式 [code] margin:auto; width:98%; overflow:scroll; _height:expression(this.scrollHeight>365?"365px":"auto"); [/code]2009-06-05
YUI 中的 Grids CSS值得關(guān)注和學習的-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
YUI 中的 Grids CSS 主要有三個部分值得大家關(guān)注和學習: 1、布局的思想:使用 “負 margin(Negative Margins)” 技術(shù) 詳細可參閱:《Creating Liquid L2008-10-17- 這篇文章主要介紹了5分鐘教你學會 CSS Grid 布局的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-04