快速開始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)格布局的子元素可以定位自己的位置，可以是實現(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彈性布局，實現(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ū)域

實現(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

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


image.png

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

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

進階

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)
        }
    }
}
fr

以上實現(xiàn)了彈性布局，fr用來實現(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

恭喜你，從一開始一步步的實現(xiàn)了一個網(wǎng)格布局，可以發(fā)現(xiàn)所有的樣式都寫在網(wǎng)格容器里面的，當(dāng)我們實現(xiàn)一些復(fù)雜布局的時候，就顯得有點力不從心了，接下來我們來介紹下寫在網(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

是不是有點蒙，我們可以大概看下，先來看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文件中單獨設(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、通過單獨設(shè)置item-2的位置，把本身要在第一行的item-3給擠下來了，然后 3、4、5按照300 200 150 排列
4、這時候兩件三列排列完了，但是還有個元素，此時剩下的元素就會獨自占一行的位置，它的大小一樣會按照網(wǎng)格容器定義的行高列寬來渲染
5、最后我們給item-6來設(shè)置了終極簡寫方式，
終極簡寫：行開始 / 列開始 / 行結(jié)束 / 列結(jié)束，然后我們把位置對應(yīng)上
grid-area:3 / 1 / 4 / 4

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

幾種布局

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

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

設(shè)置網(wǎng)格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就可以實現(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實現(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ù)雜布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容