最近在學(xué)習(xí)css grid布局，為了避免以后忘記了難得查資料，遍寫(xiě)在博客中方便以后查詢！

1,display屬性

display有三個(gè)值，

grid：生成一個(gè)塊級(jí)網(wǎng)格
inline-grid：生成一個(gè)內(nèi)聯(lián)網(wǎng)格
subgrid：如果你的網(wǎng)格容器本身是另一個(gè)網(wǎng)格的網(wǎng)格項(xiàng)（即嵌套網(wǎng)格），你可以使用這個(gè)屬性來(lái)表示，它的行/列的大小繼承自它的父級(jí)網(wǎng)格容器，而不是自己指定的。　　

我們先創(chuàng)建一個(gè)grid的網(wǎng)格容器

在html中寫(xiě)入代碼

<div class="container">

</div>

css中寫(xiě)入代碼

    .container{
        display: grid;
    }

這樣我們就創(chuàng)建好了一個(gè)網(wǎng)格容器，因?yàn)間rid容器時(shí)隱性容器，在我們沒(méi)有向容器里面添加元素時(shí)，是看不到效果的，grid容器在我們沒(méi)有設(shè)置大小時(shí)，默認(rèn)寬度為100%，高度為0.

注意：在 網(wǎng)格容器(Grid Container) 上使用column，float，clear，vertical-align不會(huì)產(chǎn)生任何效果。

2,grid-template-columns / grid-template-rows

　　用來(lái)定義網(wǎng)格的列和行，即設(shè)置幾行幾列。

值

單位為“px”
單位為“fr”
auto
n%
repeat（）

（1）px

我們?cè)赾ontainer中添加代碼

    .container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 50px 100px;
    }

這樣我們就創(chuàng)建了一個(gè)三行，三列的網(wǎng)格，寬度分別為100px,100px,100px。高度分別為100px,50px,100px。

但是，我們?cè)跒g覽器中是看不到效果的，我們需要向里面添加元素，才能看到效果。

我們?cè)趆tml中添加以下代碼

<div class="container">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
</div>

我們?cè)赾ss中添加代碼放方便查看效果。

    .container div{
        border: 1px #000 solid;
    }

我們就能看到效果了，效果圖為

可以看到我們只有一個(gè)3×2的網(wǎng)格，但是我們明明設(shè)置的3×3的網(wǎng)格啊。這是因?yàn)間rid時(shí)隱性表格，我們只有六個(gè)元素，所以只能填滿六個(gè)格子，而剩下的沒(méi)有填的我們時(shí)看不到的，但是它們還是存在的。當(dāng)我們沒(méi)有設(shè)置填充的元素的位置時(shí)，默認(rèn)時(shí)從上到下，從左到右按行依次填充，即先填充第一行，填充慢了之后在填充第二行，直到元素被用完為止。

（2）fr

接下來(lái)我們將單位“px”改為“fr”，

css中container中修改代碼

    .container{
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px 50px 100px;
    }

效果圖為

因?yàn)槲覀兛偣灿?fr，所以將容器的寬度平均分為了4份，一個(gè)fr占一份，兩個(gè)占兩份，一次類(lèi)推，因?yàn)槲覀儧](méi)有設(shè)置容器的寬度，也沒(méi)有用px單位設(shè)置網(wǎng)格格子的寬度，所以容器默認(rèn)寬度為100%。

注意：當(dāng)fr和px共存時(shí)，是將px的大小減去之后，在剩余的大小內(nèi)在均分。

（3）auto

接下來(lái)我們?cè)侔補(bǔ)uto加進(jìn)去。

css中container中修改代碼

    .container{
        display: grid;
        grid-template-columns: 100px 100px auto 100px;
        grid-template-rows: 100px 50px 100px;
    }

效果圖為

由圖可知，auto是在其他固定的大小分配之后，剩下的就是它的大小了，如果有兩個(gè)或兩個(gè)以上的auto，就是每個(gè)auto之間平均分配剩下的大小。

（4）n%

至于n%，n時(shí)多少就占整個(gè)容器的百分之多少。

（5）repeat()

我們修改css中container中的代碼

    .container{
        display: grid;
        grid-template-columns: repeat(3,100px);
        grid-template-rows: 100px 50px 100px;
    }

上面的代碼等價(jià)與下面的代碼

    .container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 50px 100px;
    }

這些值放在grid-template-rows中也是一樣的，只是列變行而已，這里就不做演示了。

3,grid-template-areas

指定的 網(wǎng)格區(qū)域(Grid Area) 名稱(chēng)來(lái)定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱(chēng)導(dǎo)致內(nèi)容跨越這些單元格。這個(gè)語(yǔ)法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。

值

<grid-area-name>：由網(wǎng)格項(xiàng)的grid-area指定的網(wǎng)格區(qū)域名稱(chēng)
.（點(diǎn)號(hào)） ：代表一個(gè)空的網(wǎng)格單元
none：不定義網(wǎng)格區(qū)域

修改html中的代碼

<div class="container">
     <div class="item-a">1</div>
     <div class="item-b">2</div>
     <div class="item-c">3</div>
     <div class="item-d">4</div>
     <div class="item-e">5</div>
     <div class="item-f">6</div>
</div>

修改css中的代碼

    .item-a {grid-area: one;}
    .item-b {grid-area: two;}
    .item-c {grid-area: three;}
    .item-d {grid-area: four;}
    .item-e {grid-area: five;}
    .item-f {grid-area: six;}
    .container {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: auto;
        grid-template-areas: 
        "one one one one"
        "two two . three"
        "four four four four"
        "five five six six";
    }
    .container div{
        border: 1px solid #000;
    }

效果圖

因?yàn)槲覀儾淮_定有幾行，所以我們?cè)O(shè)置的是auto，這樣我們就不能設(shè)置行高了，子元素的高度是多少它的高度就是多少，但是我們可以設(shè)置子元素的高度。就能設(shè)置網(wǎng)格的高度了。

所以我們?cè)O(shè)置子元素高度為100px，對(duì)container下的div設(shè)置高度

    .container div{
        height: 100px;
        border: 1px solid #000;
    }

效果圖為

這樣，我們就設(shè)置好了這樣一個(gè)網(wǎng)格，第一行區(qū)域名稱(chēng)為“one”，第二行一二列區(qū)域名稱(chēng)為“two”，第二行第四列區(qū)域名稱(chēng)為“three”，第三行區(qū)域名稱(chēng)為“four”，第四行一二列名稱(chēng)為“five”，第四行三四列名稱(chēng)為“six”。

4,grid-column-gap / grid-row-gap

　　指定網(wǎng)格線(grid lines)的大小。即設(shè)置列/行之間間距的寬度。

我們修改css中container的代碼

    .container {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: auto;
        grid-template-areas: 
        "one one one one"
        "two two . three"
        "four four four four"
        "five five six six";
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }

效果圖為

下面兩段代碼等價(jià)，下面的代碼上上面的簡(jiǎn)寫(xiě)。

        grid-column-gap: 10px;
        grid-row-gap: 10px;

    grid-gap: 10px;

5,justify-items /align-items

沿著 行軸線(row axis) 或列軸線（column axis）對(duì)齊 網(wǎng)格項(xiàng)(grid items) 內(nèi)的內(nèi)容。該值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)。

值

start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的左側(cè)
end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
stretch：填滿網(wǎng)格區(qū)域?qū)挾龋J(rèn)值）

修改css中container容器下div的代碼，

    .container div{
        display: grid;
        height: 100px;
        border: 1px solid #000;
        justify-items: center;
        align-items: center;
    }

效果圖為

我這里就只嘗試center了。

6,justify-content /align-content

有時(shí)，我們的網(wǎng)格合計(jì)大小可能小于其 網(wǎng)格容器(grid container) 大小。 比如我們的所有 網(wǎng)格項(xiàng)(grid items) 都使用像px這樣的非靈活單位設(shè)置大小，我們又設(shè)置了容器的大小。在這種情況下，您可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對(duì)齊方式。

值

start：將網(wǎng)格對(duì)齊到 網(wǎng)格容器(grid container) 的頂部
end：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的底部
center：將網(wǎng)格對(duì)齊到 網(wǎng)格容器 的中間（垂直居中）
stretch：調(diào)整 網(wǎng)格項(xiàng)(grid items) 的高度，允許該網(wǎng)格填充滿整個(gè) 網(wǎng)格容器 的高度
space-around：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端放置一半的空間
space-between：在每個(gè)網(wǎng)格項(xiàng)之間放置一個(gè)均勻的空間，上下兩端沒(méi)有空間
space-evenly：在每個(gè)柵格項(xiàng)目之間放置一個(gè)均勻的空間，上下兩端放置一個(gè)均勻的空間

為了效果明顯，我們規(guī)定一下容器的大小。

css中container中的代碼改為

    .container {
        display: grid;
        width: 800px;
        height: 800px;
        border: 1px solid red;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: auto;
        grid-template-areas: 
        "one one one one"
        "two two . three"
        "four four four four"
        "five five six six";
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        justify-content: start;
        align-content: start;
    }

效果圖

我們?cè)傩薷囊幌轮担瑢⒄麄€(gè)網(wǎng)格放在容器的中間，修改justify-content和align-content都為center。

css中container中的代碼修改為

    .container {
        display: grid;
        width: 800px;
        height: 800px;
        border: 1px solid red;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: auto;
        grid-template-areas: 
        "one one one one"
        "two two . three"
        "four four four four"
        "five five six six";
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        justify-content: center;
        align-content: center;
    }

效果圖為

剩下的值自己去實(shí)驗(yàn)把。我們就做到這里了。

7,grid-column-start,grid-column-end,grid-row-start和grid-row-end。

為了方便演示，我們?cè)偬砑右粋€(gè)容器container1,

html中代碼為

<div class="container">
     <div class="item-a">1</div>
     <div class="item-b">2</div>
     <div class="item-c">3</div>
     <div class="item-d">4</div>
     <div class="item-e">5</div>
     <div class="item-f">6</div>
</div>

<div class="container1">
     <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中代碼為

    .item-a {grid-area: one;}
    .item-b {grid-area: two;}
    .item-c {grid-area: three;}
    .item-d {grid-area: four;}
    .item-e {grid-area: five;}
    .item-f {grid-area: six;}
    .container {
        display: grid;
        width: 800px;
        height: 800px;
        border: 1px solid red;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: auto;
        grid-template-areas: 
        "one one one one"
        "two two . three"
        "four four four four"
        "five five six six";
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        justify-content: center;
        align-content: center;
    }
    .container1 {
        display: grid;
        margin-left: 900px;
        margin-top: -800px;
        width: 800px;
        height: 800px;
        border: 1px solid red;
        grid-template-columns: 100px 100px 100px 100px;
        grid-template-rows: 100px 100px 100px 100px;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        justify-content: center;
        align-content: center;
    }

    .container div{
        display: grid;
        height: 100px;
        border: 1px solid #000;
        justify-items: center;
        align-items: center;
    }
    .container1 div{
        display: grid;
        height: 100px;
        border: 1px solid #000;
        justify-items: center;
        align-items: center;
    }

效果圖為

接下來(lái)我們使用grid-column-start,grid-column-end,grid-row-start和grid-row-end將container1樣式改成和container中樣式一樣的。

css中添加代碼

    .item-1 {grid-column-start: 1; grid-column-end: 5;}
    .item-2 {grid-column-start: 1; grid-column-end: 3;}
    .item-3 {grid-column-start: 4; grid-column-end: 5;}
    .item-4 {grid-column-start: 1; grid-column-end: 5;}
    .item-5 {grid-column-start: 1; grid-column-end: 3;}
    .item-6 {grid-column-start: 3; grid-column-end: 5;}

上面代碼的簡(jiǎn)寫(xiě)為

    .item-1 {grid-column: 1 / 5;}
    .item-2 {grid-column: 1 / 3;}
    .item-3 {grid-column: 4 / 5;}
    .item-4 {grid-column: 1 / 5;}
    .item-5 {grid-column: 1 / 3;}
    .item-6 {grid-column: 3 / 5;}

效果圖為

我們就設(shè)計(jì)出了和container一樣的樣式。

8,grid-auto-columns / grid-auto-rows

指定任何自動(dòng)生成的網(wǎng)格軌道(grid tracks)（又名隱式網(wǎng)格軌道）的大小。在你明確定位的行或列（通過(guò)grid-template-rows/grid-template-columns），超出定義的網(wǎng)格范圍時(shí)，隱式網(wǎng)格軌道被創(chuàng)建了。

上面我們創(chuàng)建了一個(gè)4×4的網(wǎng)格，那么當(dāng)我們?cè)賑ontainer1容器中再添加一個(gè)div，并且超出4×4的網(wǎng)格了呢，我們來(lái)試一下。

在html中的container和container1中分別添加一個(gè)div，設(shè)置class分別為item-h和item-7。

container中添加

     <div class="item-h">7</div>

container1中添加

     <div class="item-7">7</div>

將css中兩個(gè)container的 justify-content: center;align-content: center改變

        justify-content: start;
        align-content: start;

再添加代碼

    .item-h {grid-column: 6 / 7;grid-row: 6 / 7;}    
    .item-7 {grid-column: 6 / 7;grid-row: 6 / 7;}

效果為

我們?cè)赾ss中的container1中添加

        grid-auto-columns: 100px;
        grid-auto-rows: 100px;

效果圖

我們可以看到超出4×4的網(wǎng)格也別設(shè)置了大小，寬100px，高100px。

9,grid-auto-flow

前面我們說(shuō)了grid在我們沒(méi)有設(shè)置元素位置時(shí)，默認(rèn)是從上到下，從左到右的按行依次填充，但是這個(gè)也是可以設(shè)置。

值

row：告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行
column：告訴自動(dòng)布局算法依次填入每列，根據(jù)需要添加新列
dense：告訴自動(dòng)布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時(shí)，嘗試填充網(wǎng)格中較早的空缺

設(shè)置grid-auto-flow：row;就是默認(rèn)的排列方式。即按行來(lái)排列

設(shè)置grid-auto-flow：column;就是按列來(lái)排列，即一列一列的排完才開(kāi)始下一列。

注意：當(dāng)設(shè)置grid-auto-flow：dense;時(shí)網(wǎng)格項(xiàng)可能會(huì)亂序。

10,justify-self / align-self

沿著 行軸線(row axis)或列軸線（column axis） 對(duì)齊 網(wǎng)格項(xiàng) 內(nèi)的內(nèi)容。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。

值

start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的左側(cè)
end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
stretch：填充整個(gè)網(wǎng)格區(qū)域的寬度（這是默認(rèn)值）

到這里grid也學(xué)了一大部分了，剩下的內(nèi)容我也沒(méi)有弄清楚，畢竟我也是一個(gè)初學(xué)者。

可以參考一些這個(gè)網(wǎng)址進(jìn)行深入了解：http://www.css88.com/archives/8510/comment-page-1

總結(jié)

以上是生活随笔為你收集整理的css grid布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。