CSS網(wǎng)格布局的示例代碼
我要評(píng)論本文介紹了CSS網(wǎng)格布局的示例代碼，分享給大家，具體如下：
瀏覽器兼容性
可以看出CSS網(wǎng)格布局從Safari 10.1, Firefox 52, Chrome 60，Edge 15開(kāi)始受到支持。
網(wǎng)格布局
頁(yè)面基本元素：
<div class="wrapper">
<div class="box box1">One</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
樣式：
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box {
border: 2px solid #FDC180;
}
通過(guò)在元素上聲明 display：grid 或 display：inline-grid 來(lái)創(chuàng)建一個(gè)網(wǎng)格容器：
.wrapper {
display: grid;
}
如下效果：
定義網(wǎng)格中的行和列
通過(guò) grid-template-columns和grid-template-rows屬性來(lái)定義網(wǎng)格中的行和列。這些屬性定義了網(wǎng)格的軌道。網(wǎng)格軌道是網(wǎng)格中任意兩條線之間的空間。
如下網(wǎng)格，包含了三個(gè)200像素寬的列軌道：
.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}
fr單位
新的fr單位代表網(wǎng)格容器中可用空間的一等份。下一個(gè)網(wǎng)格定義將創(chuàng)建三個(gè)相等寬度的軌道，這些軌道會(huì)隨著可用空間增長(zhǎng)和收縮。
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
也可以和像素單位混用：
.wrapper {
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
在軌道清單中使用repeat()
repeat 的語(yǔ)法如下：
repeat(number of columns/rows, the column width we want);
有著多軌道的大型網(wǎng)格可使用 repeat() 標(biāo)記來(lái)重復(fù)部分或整個(gè)軌道列表。如下方的網(wǎng)格定義：
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
可以寫(xiě)成：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Repeat 語(yǔ)句可以用于重復(fù)軌道列表中的一部分。在下面的例子中我創(chuàng)建了一個(gè)網(wǎng)格：它起始軌道為20像素，接著重復(fù)了6個(gè)1fr的軌道，最后再添加了一個(gè)20像素的軌道。
.wrapper {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
Repeat 語(yǔ)句可以傳入一個(gè)軌道列表，因此你可以用它來(lái)創(chuàng)建一個(gè)多軌道模式的重復(fù)軌道列表。在下一個(gè)例子中，網(wǎng)格將有共計(jì)10個(gè)軌道，為1個(gè)1fr軌道后面跟著1個(gè)2fr軌道，該模式重復(fù)5次。
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr 2fr);
}
grid-auto-rows 和 grid-auto-columns
創(chuàng)建上文中網(wǎng)格例子的時(shí)候，我們用 grid-template-columns 屬性定義了自己的列軌道，但是卻讓網(wǎng)格按所需的內(nèi)容創(chuàng)建行，這些行會(huì)被創(chuàng)建在隱式網(wǎng)格中。顯式網(wǎng)格包含了你在 grid-template-columns 和 grid-template-rows 屬性中定義的行和列。如果你在網(wǎng)格定義之外又放了一些東西，或者因?yàn)閮?nèi)容的數(shù)量而需要的更多網(wǎng)格軌道的時(shí)候，網(wǎng)格將會(huì)在隱式網(wǎng)格中創(chuàng)建行和列。按照默認(rèn)，這些軌道將自動(dòng)定義尺寸，所以會(huì)根據(jù)它里面的內(nèi)容改變尺寸。
可以在隱式網(wǎng)格中用 grid-auto-rows 和 grid-auto-columns 屬性來(lái)定義一個(gè)設(shè)置大小尺寸的軌道。
在下面的例子中我們用 grid-auto-rows 屬性來(lái)確保在隱式網(wǎng)格中創(chuàng)建的軌道是200像素高。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
}
minmax()
在設(shè)置一個(gè)顯式的網(wǎng)格或者定義自動(dòng)創(chuàng)建的行和列的大小的時(shí)候，我們也許想給網(wǎng)格一個(gè)最小的尺寸，但要確保他們能擴(kuò)大到容納他里面添加的內(nèi)容。舉個(gè)例子，我想讓我的行的高度永遠(yuǎn)不會(huì)縮小到100像素以下，但是如果我的內(nèi)容延伸到300像素高了我想讓我的行高也延伸到這個(gè)高度。
網(wǎng)格用minmax()函數(shù)來(lái)解決這個(gè)問(wèn)題。在下一個(gè)例子中我用minmax()作為grid-auto-rows的值。自動(dòng)創(chuàng)建的行高將會(huì)是最小100像素，最大為auto。用auto意味著行的尺寸將會(huì)根據(jù)內(nèi)容的大小來(lái)自動(dòng)變換：根據(jù)本行中最高的單元，把空間擴(kuò)展到足夠容納該單元。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
<div class="wrapper">
<div class="box">One</div>
<div class="box">Two
<p>I have some more content in.</p>
<p>This makes me taller than 100 pixels.</p>
</div>
<div class="box">Three</div>
<div class="box">Four</div>
<div class="box">Five</div>
</div>
跨軌道放置網(wǎng)格項(xiàng)目
如下有四條縱向的網(wǎng)格線和三條橫向的網(wǎng)格線：
使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 屬性，把前兩個(gè)元素放到了我們的三列網(wǎng)格中。從左至右，第一個(gè)元素從列線1開(kāi)始，延伸至列線4，也就是我們這個(gè)例子中最右邊的列線。并從行線1延伸到行線3，占據(jù)了兩個(gè)行軌道。
第二個(gè)元素從列線1開(kāi)始，延伸了一個(gè)軌道。因?yàn)檫@是默認(rèn)行為，所以我不用指定結(jié)束線。并且它從行線3到行線5，跨越了兩個(gè)行軌道。剩下的元素會(huì)把自己安放到網(wǎng)格空余的空間中。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
網(wǎng)格間距
在兩個(gè)網(wǎng)格單元之間的 網(wǎng)格橫向間距 或 網(wǎng)格縱向間距可使用 grid-column-gap 和 grid-row-gap 屬性來(lái)創(chuàng)建，或者直接使用兩個(gè)合并的縮寫(xiě)形式 grid-gap。在下面的例子中，我會(huì)創(chuàng)建一個(gè)橫向間距為10px、縱向間距為1em的網(wǎng)格元素。
嵌套網(wǎng)格
一個(gè)網(wǎng)格項(xiàng)目可以也成為一個(gè)網(wǎng)格容器。在接下來(lái)的例子中我事先有了一個(gè)3列的網(wǎng)格元素，并有兩個(gè)跨軌道的網(wǎng)格。在這個(gè)例子中，第一個(gè)網(wǎng)格項(xiàng)目含有幾個(gè)子級(jí)項(xiàng)目。當(dāng)這些項(xiàng)目不是網(wǎng)格容器的直接子級(jí)元素時(shí)，它們不會(huì)參與到網(wǎng)格布局中，并顯示為正常的文檔流。
html：
<div class="wrapper">
<div class="box box1">
<div class="nested">a</div>
<div class="nested">b</div>
<div class="nested">c</div>
</div>
<div class="box box2">Two</div>
<div class="box box3">Three</div>
<div class="box box4">Four</div>
<div class="box box5">Five</div>
</div>
css：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box2 {
grid-column-start: 1;
grid-row-start: 3;
grid-row-end: 5;
}
.box {
border: 2px solid #FDC180;
background: #FFD7A4;
padding: 10px;
color: #FB2E10;
}
.nested {
border: 2px solid #FFF1A2;
background: #FFFAD9;
}
如果我把 box1 設(shè)置成 display: grid 我可以給它定義軌道然后它也會(huì)變成一個(gè)網(wǎng)格元素，它的子級(jí)元素也會(huì)排列在這個(gè)新網(wǎng)格元素中。
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
網(wǎng)格布局也稱grid布局，利用grid布局可以很輕松的實(shí)現(xiàn)很多的網(wǎng)頁(yè)布局，Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置，這篇文章主要介紹了CSS布2023-07-24
在CSS網(wǎng)格布局中的列中填充項(xiàng)目的實(shí)現(xiàn)方法
這篇文章主要介紹了在CSS網(wǎng)格布局中的列中填充項(xiàng)目的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-14
這篇文章主要介紹了CSS Grid 網(wǎng)格布局全解析的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-29css框架(CSS Frameworks)：CSS框架應(yīng)用
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：css框架通常只是一些css文件的集合，這些文件包括基本布局、表單樣式、網(wǎng)格或簡(jiǎn)單結(jié)構(gòu)、以及樣式重置, 什么是css框架2009-04-02
