快速開始grid布局

Grid布局概念

CSS Gird已經(jīng)被W3C納入到css3的一個布局模塊中记盒，被稱為CSS Grid Layout Module睦疫，一般習(xí)慣稱為網(wǎng)格布局纷责。

網(wǎng)格布局可以將應(yīng)用程序分割成不同的空間吆寨，定義它們的大小推姻、位置和層級窃款。

簡單來說课兄，網(wǎng)格布局就像表格一樣可以讓元素按列和行對齊排列，不同的是晨继，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)烟阐，比如一個網(wǎng)格布局的子元素可以定位自己的位置，可以是實(shí)現(xiàn)類似定位的效果紊扬。

兼容性

可以看到幾大瀏覽器都已經(jīng)支持了Grid布局蜒茄，接下來我們來一步步的來玩轉(zhuǎn)Grid布局

grid vs flex

我們知道flex和grid都是css3新的布局方式，如果瀏覽器都支持兩種布局餐屎，你會選擇那種呢檀葛？當(dāng)我們了解兩者以后就能做出正確的選擇了。

flex布局是一維布局腹缩，grid布局是二維布局屿聋。

網(wǎng)格容器和網(wǎng)格項

我們知道給一個元素設(shè)置了display:flex就指定了flex彈性布局空扎，實(shí)現(xiàn)grid布局一樣簡單，給元素設(shè)置display:grid就可以了润讥。

<style>
    .container{
        display: grid;
    }
</style>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

container 就是一個網(wǎng)格容器转锈，里面的item就是網(wǎng)格項

網(wǎng)格術(shù)語

網(wǎng)格線 grid lines

網(wǎng)格線組成了網(wǎng)格，是網(wǎng)格水平和垂直的分界線楚殿。

網(wǎng)格線

網(wǎng)格軌道 grid track

就是兩條網(wǎng)格線之間的空間撮慨，可以理解成表格里面的行或者列，網(wǎng)格里面為grid-row和grid-column勒魔，網(wǎng)格軌道可以設(shè)置大小甫煞，來控制高度或者寬度。

網(wǎng)格軌道

上圖grid-column2和grid-column3之間的區(qū)域就是一個網(wǎng)格軌道

網(wǎng)格單元格 grid cell

就是四條網(wǎng)格線之間的空間冠绢，是最小的單位。

網(wǎng)格單元格

網(wǎng)格區(qū)域

也是四條網(wǎng)格線組成的空間常潮，可能包含一個或者多個單元格弟胀。

網(wǎng)格區(qū)域

實(shí)現(xiàn)一個grid布局

了解網(wǎng)格個相關(guān)概念，接下來我們來創(chuàng)建一個簡單的grid布局喊式。

上面我們說網(wǎng)格軌道的時候說了可以給網(wǎng)格軌道設(shè)置大小孵户，可以控制高度或者寬度。

html

<div class="grid">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
</div>

css

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 300px 200px 150px;
    grid-template-rows: 150px 100px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}

我們來分析下上面的css

1岔留、給grid元素設(shè)置了 display: grid來聲明使用grid布局
2夏哭、使用grid-template-columns來設(shè)置列寬，分別為 300px 200px 150px
3献联、使用grid-template-rows來設(shè)置行高竖配，分別為150px 100px

以上代碼我們是實(shí)現(xiàn)了一個兩行三列的grid布局，此時瀏覽器顯示如下

image.png

簡書不支持GIF圖里逆，差異請??這里

動態(tài)圖里面我們可以看到網(wǎng)格線

進(jìn)階

fr

grid-template-columns和grid-template-rows不只是可以設(shè)置具體的數(shù)值进胯，還可以設(shè)置百分比、rem一類的原押，還可以設(shè)置一個新單位 fr胁镐，
它是來干什么的呢？我們先看

我們先把上面demo里面的css文件改下

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2,1fr);
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}

以上實(shí)現(xiàn)了彈性布局诸衔，fr用來實(shí)現(xiàn)彈性布局, 我們這里使用里repeat(2, 1fr),表示重復(fù)兩次盯漂，都是1fr

grid-gap

grid-gap用來這是網(wǎng)格項間隙

css修改如下

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2,1fr);
    grid-gap: 40px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}

展示如下

grid-gap

網(wǎng)格布局屬性 grid-placement-properties

恭喜你，從一開始一步步的實(shí)現(xiàn)了一個網(wǎng)格布局笨农，可以發(fā)現(xiàn)所有的樣式都寫在網(wǎng)格容器里面的就缆，當(dāng)我們實(shí)現(xiàn)一些復(fù)雜布局的時候，就顯得有點(diǎn)力不從心了磁餐，接下來我們來介紹下寫在網(wǎng)格項中的屬性违崇。

網(wǎng)格布局屬性主要用來放置容器內(nèi)的網(wǎng)格項目阿弃，就是單一項目的位置。網(wǎng)格布局屬性主要有以下四個屬性：

 1羞延、grid-column-start  設(shè)置垂直方向的開始位置網(wǎng)格線
 2渣淳、grid-column-end    設(shè)置垂直方向的結(jié)束位置網(wǎng)格線
 3、grid-row-start     設(shè)置水平方向的開始位置網(wǎng)格線
 4伴箩、grid-row-end       設(shè)置水平方向的結(jié)束位置網(wǎng)格線

以上的簡寫方式

 1入愧、grid-column: grid-column-start / grid-column-end
 2、grid-row: grid-row-start / grid-row-end

終極簡寫

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-colun-end

是不是有點(diǎn)蒙嗤谚，我們可以大概看下棺蛛，先來看deme

還是熟悉的html布局

<div class="grid">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
</div>

css

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 300px 200px 150px;
    grid-template-rows: 150px 100px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
    .item-2{  // 看這里看這里
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .item-6{   // 你要先看上面再看這里
        grid-area: 3 / 1 / 4 / 4;
    }
}

先來看看我們的成果

grid

顯示網(wǎng)格線的圖片

網(wǎng)格線

參考上圖，我們來分析下css
1巩步、grid元素聲明grid布局旁赊，grid-template-columns和grid-template-rows來創(chuàng)建一個兩行三列的網(wǎng)格，但是渲染的結(jié)果卻是三行三列椅野，為什么终畅？我們先接著往下分析
2、css文件中單獨(dú)設(shè)置item-2網(wǎng)格項的位置竟闪，
grid-column-start:2 垂直線開始位置為2
grid-column-end:4垂直線結(jié)束位置為4
grid-row-start:1 水平線開始位置為1
grid-row-end:2 水平線結(jié)束位置為2
3离福、通過單獨(dú)設(shè)置item-2的位置，把本身要在第一行的item-3給擠下來了炼蛤，然后 3妖爷、4、5按照300 200 150 排列
4理朋、這時候兩件三列排列完了絮识，但是還有個元素，此時剩下的元素就會獨(dú)自占一行的位置暗挑，它的大小一樣會按照網(wǎng)格容器定義的行高列寬來渲染
5笋除、最后我們給item-6來設(shè)置了終極簡寫方式，
終極簡寫：行開始 / 列開始 / 行結(jié)束 / 列結(jié)束炸裆，然后我們把位置對應(yīng)上
grid-area:3 / 1 / 4 / 4

通過設(shè)置網(wǎng)格項樣式屬性垃它，我們可以就實(shí)現(xiàn)很多復(fù)雜的布局結(jié)構(gòu)了。

幾種布局

最后我們結(jié)合上面所學(xué)到的實(shí)現(xiàn)幾個常見布局

1烹看、左右固定国拇，中間自適應(yīng)

設(shè)置網(wǎng)格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就可以實(shí)現(xiàn)，再簡單不過了

html

<div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

css

.container{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    height: 200px;
}
.container div{
    text-align: center;
}
.left{
    background: greenyellow;
}
.middle{
    background: lightblue;
}
.right{
    background: greenyellow;
}

中間自適應(yīng)惯殊，兩側(cè)固定

2酱吝、九宮格
使用grid-gap設(shè)置網(wǎng)格項間距使用fr來平分

html

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

css

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 400px;
    width: 400px;
    grid-gap: 8px;
}
.item{
    background: lightskyblue;
}

顯示如下

九宮格

3、圣杯土思、雙飛翼
使用grid-area設(shè)置header元素和footer元素位置务热，結(jié)合grid-template-columns和grid-template-rows實(shí)現(xiàn)布局
html

<div class="container">
    <div class="header">header</div>
    <div class="left">left</div>
    <div class="body">body</div>
    <div class="right">right</div>
    <div class="footer">footer</div>
</div>

css

.container{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 50px 300px 50px;
}
.header{
    grid-area: 1 / 1 / 2 / 4;
}
.footer{
    grid-area: 3 / 1 / 4 / 4;
}
.header{
    background: lightsalmon;
}
.left{
    background: lightseagreen;
}
.body{
    background: lightslategray;
}
.right{
    background: lightyellow;
}
.footer{
    background: yellowgreen;
}

復(fù)雜布局