這篇文章主要講解了“如何使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)”吧！

成都創(chuàng)新互聯(lián)公司成立以來(lái)不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點(diǎn)，以客戶(hù)需求中心、市場(chǎng)為導(dǎo)向”的快速反應(yīng)體系。對(duì)公司的主營(yíng)項(xiàng)目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計(jì)、行業(yè) / 企業(yè)門(mén)戶(hù)設(shè)計(jì)推廣、行業(yè)門(mén)戶(hù)平臺(tái)運(yùn)營(yíng)、重慶APP軟件開(kāi)發(fā)、手機(jī)網(wǎng)站制作設(shè)計(jì)、微信網(wǎng)站制作、軟件開(kāi)發(fā)、成都移動(dòng)服務(wù)器托管等實(shí)行標(biāo)準(zhǔn)化操作，讓客戶(hù)可以直觀的預(yù)知到從成都創(chuàng)新互聯(lián)公司可以獲得的服務(wù)效果。

HTML文檔中有文檔流，其實(shí)在CSS Grid Layout中有網(wǎng)格流。簡(jiǎn)單點(diǎn)理解就是，在一個(gè)被顯式聲明為網(wǎng)格的容器中，其所有子元素自動(dòng)被認(rèn)定為網(wǎng)格單元格，而這些網(wǎng)格單元格在沒(méi)有被顯式設(shè)置明確位置時(shí)，瀏覽器將會(huì)自動(dòng)為這些網(wǎng)格單元格的位置進(jìn)行計(jì)算，按照先后順序從左向右，或從上到下排列。在這里把這種方式稱(chēng)之為網(wǎng)格的流動(dòng)。

在具體介紹網(wǎng)格流動(dòng)相關(guān)內(nèi)容之前，我們先一起來(lái)回憶一個(gè)簡(jiǎn)單的效果。平時(shí)在Web頁(yè)面制作當(dāng)中，經(jīng)常會(huì)碰到產(chǎn)品列表展示頁(yè)面，或者說(shuō)相冊(cè)展示頁(yè)面的效果。如下圖所示：

實(shí)現(xiàn)上圖的效果，大家平時(shí)大多會(huì)采用float和display:inline-block等方法實(shí)現(xiàn)。但這些方法或多或少存在一定的局限性。那么在CSS Grid Layout中，實(shí)現(xiàn)這樣的布局相對(duì)而言會(huì)簡(jiǎn)單多。比如通過(guò)網(wǎng)格線，或者網(wǎng)格區(qū)域來(lái)明確指定各自的位置。不過(guò)這樣一來(lái)，就存在一個(gè)潛在的問(wèn)題：如果在不同的設(shè)備上瀏覽，每行展示的數(shù)量不一致時(shí)，需要在媒體查詢(xún)中為每個(gè)網(wǎng)格重新指定位置，這變得更為復(fù)雜。也不是我們希望的效果。其實(shí)在網(wǎng)格布局中還有一種更方便的方法，就是采用網(wǎng)格流來(lái)實(shí)現(xiàn)。這也是我們今天要說(shuō)的內(nèi)容 。

網(wǎng)格的自動(dòng)流

在CSS Grid Layout中，給元素顯式的聲明網(wǎng)格，如果沒(méi)有顯式的通過(guò)網(wǎng)格線或者網(wǎng)格區(qū)域明確指定網(wǎng)格的位置，那么瀏覽器將會(huì)對(duì)容器內(nèi)子元素（網(wǎng)格單元格）進(jìn)行自動(dòng)布局。

來(lái)看一個(gè)簡(jiǎn)單的示例，假設(shè)容器.wrapper中有14個(gè).box(A~O)。容器.wrapper顯示的聲明為網(wǎng)格，并且不對(duì)任何.box做顯式的位置定位，這個(gè)時(shí)候?yàn)g覽器會(huì)自動(dòng)為.box進(jìn)行自動(dòng)布局。為了更好的看到效果，在這個(gè)示例中給偶數(shù)的.box設(shè)置了一個(gè)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 ;
}

效果如下：

在線案例

不過(guò)離文章所示效果還是略有差距，每個(gè).box之間沒(méi)有間距，我嘗試著給.box設(shè)置margin值：

在線案例

從效果圖中可以明顯看出，盒模型解析已做出變化：

上圖中可以得知，在CSS Grid Layout中盒模型大小計(jì)算變成：容器width = margin-left + margin-right + padding-left + padding-right + content width + border-left-width + border-right+width。比如我們這個(gè)示例中，.box設(shè)置width:100px，并且有一個(gè)margin-right:15px;那實(shí)際上.box的內(nèi)容寬度僅只有85px。這樣一來(lái)與文章開(kāi)頭示例相左，如果需要做到一致效果，還需對(duì)其做一定的變化。這個(gè)變化就是對(duì)容器.wrapper的寬度和grid-template-columns屬性值：

代碼如下:

<font face="Courier New">
<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>

效果如下：

在線案例

或許你會(huì)感覺(jué)這并沒(méi)有強(qiáng)大到哪呀，跟以前使用float有太多的變化嗎？如果你覺(jué)得沒(méi)有，那請(qǐng)繼續(xù)往下閱讀。

網(wǎng)格流動(dòng)&mdash;&mdash;列

網(wǎng)格的自動(dòng)流，在默認(rèn)情況下都是以行來(lái)給元素布局，也就是說(shuō)grid-auto-flow取值為row。讓網(wǎng)格單元格沿著行布局，直到?jīng)]有可放區(qū)域（列的方向），網(wǎng)格單元格會(huì)自動(dòng)換行到下一行排列。哪怕沒(méi)有顯式的聲明網(wǎng)格，瀏覽器也會(huì)為創(chuàng)建隱式網(wǎng)格的軌道，用來(lái)放自網(wǎng)格單元格。

在實(shí)際使用中，可以使用grid-auto-flow屬性來(lái)做修改，只需要把其默認(rèn)值row設(shè)置成column。網(wǎng)格中的單元將會(huì)按列顯示，如果需要，還會(huì)自動(dòng)添加列。

一起來(lái)看一個(gè)示例，你將更易理解：

代碼如下:

.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)格自動(dòng)流排列。從上面簡(jiǎn)單的示例中可以得知，只要是網(wǎng)格容器中的子元素，通過(guò)grid-auto-flow都可以讓其在網(wǎng)格容器中按列，或按行自動(dòng)排列。可往往有些時(shí)候，有些網(wǎng)格需要做一些特殊定位處理。如果其中某個(gè)或某幾個(gè)網(wǎng)格做了特殊處理，那么其他網(wǎng)格還會(huì)自動(dòng)排列？我們將帶著這個(gè)問(wèn)題來(lái)一起看一個(gè)簡(jiǎn)單的示例：

代碼如下:

<code>.wrapper { width: 560px; border: 1px solid orange; padding: 15px; margin: 20px auto; display: grid; grid-template-columns: repeat(5, 115px); grid-template-rows: auto ;}.b { grid-column: 3 / 6; grid-row: 2 / 3; outline: 2px solid red;}.f { grid-area: 3 / 1 / 4 / 6; background-color: #f36; outline: 2px solid red;}</code>

效果如下：

在線案例

在這個(gè)示例中，盒子.b,通過(guò)網(wǎng)格線，將B重新定位新位置上，但這樣并沒(méi)有影響網(wǎng)格的自動(dòng)流。.b所在的默認(rèn)位置將由其后面的.c元素補(bǔ)上。同樣的,.f元素重新定位后，別的元素補(bǔ)上。而且.f擴(kuò)展占有多個(gè)網(wǎng)格單元格，那么其他的單元格就會(huì)自動(dòng)往后移。如上圖所示。

總結(jié)

文章中通過(guò)簡(jiǎn)單示例向大家演示了CSS Grid Layout中網(wǎng)格單元格自動(dòng)排列的實(shí)現(xiàn)方法，以及如何通過(guò)grid-auto-flow來(lái)顯式設(shè)置自動(dòng)排列的方向。最后用一個(gè)示例向大家展示了，自動(dòng)排列的網(wǎng)格中，其中某個(gè)或某向個(gè)網(wǎng)格單元格顯式定位后，是否會(huì)對(duì)網(wǎng)格自動(dòng)流造成一定的影響。不過(guò)如果你看到最后一個(gè)示例時(shí)，你將不會(huì)再質(zhì)問(wèn)這個(gè)問(wèn)題。因?yàn)樾Ч嬖V你一切。

另外網(wǎng)格自動(dòng)流配合margin和媒體查詢(xún)將能更好實(shí)現(xiàn)Web中相冊(cè)相關(guān)布局，產(chǎn)品展示相關(guān)布局。當(dāng)然你也還可以在這個(gè)基礎(chǔ)上擴(kuò)展出更有意義的布局效果。

感謝各位的閱讀，以上就是“如何使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何使用CSS Grid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文題目：如何使用CSSGrid布局實(shí)現(xiàn)網(wǎng)格的流動(dòng)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://jinyejixie.com/article10/ggsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、定制開(kāi)發(fā)、網(wǎng)站排名、自適應(yīng)網(wǎng)站、云服務(wù)器、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)