css grid佈局

最近在學習css grid佈局，爲了不之後忘記了可貴查資料，遍寫在博客中方便之後查詢！

1,display屬性

display有三個值，

 

• grid ：生成一個塊級網格
• inline-grid ：生成一個內聯網格
• subgrid ：若是你的網格容器自己是另外一個網格的網格項（即嵌套網格），你可使用這個屬性來表示，它的行/列的大小繼承自它的父級網格容器，而不是本身指定的。　　

咱們先建立一個grid的網格容器

在html中寫入代碼

<div class="container">

</div>

css中寫入代碼

    .container{
        display: grid;
    }

這樣咱們就建立好了一個網格容器，由於grid容器時隱性容器，在咱們沒有向容器裏面添加元素時，是看不到效果的，grid容器在咱們沒有設置大小時，默認寬度爲100%，高度爲0.

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

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

　　用來定義網格的列和行，即設置幾行幾列。

值

• 單位爲「px」 
• 單位爲「fr」
• auto
• n%
• repeat（）

（1）px

咱們在container中添加代碼

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

這樣咱們就建立了一個三行，三列的網格，寬度分別爲100px,100px,100px。高度分別爲100px,50px,100px。

可是，咱們在瀏覽器中是看不到效果的，咱們須要向裏面添加元素，才能看到效果。

咱們在html中添加如下代碼

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

咱們在css中添加代碼放方便查看效果。

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

咱們就能看到效果了，效果圖爲

 

 能夠看到咱們只有一個3×2的網格，可是咱們明明設置的3×3的網格啊。這是由於grid時隱性表格，咱們只有六個元素，因此只能填滿六個格子，而剩下的沒有填的咱們時看不到的，可是它們仍是存在的。當咱們沒有設置填充的元素的位置時，默認時從上到下，從左到右按行依次填充，即先填充第一行，填充慢了以後在填充第二行，直到元素被用完爲止。

（2）fr

接下來咱們將單位「px」改成「fr」，

css中container中修改代碼

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

效果圖爲

由於咱們總共有4fr，因此將容器的寬度平均分爲了4份，一個fr佔一份，兩個佔兩份，一次類推，由於咱們沒有設置容器的寬度，也沒有用px單位設置網格格子的寬度，因此容器默認寬度爲100%。

注意：當fr和px共存時，是將px的大小減去以後，在剩餘的大小內在均分。

（3）auto

接下來咱們再把auto加進去。

css中container中修改代碼

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

效果圖爲

由圖可知，auto是在其餘固定的大小分配以後，剩下的就是它的大小了，若是有兩個或兩個以上的auto，就是每一個auto之間平均分配剩下的大小。

（4）n%

至於n%，n時多少就佔整個容器的百分之多少。

（5）repeat()

咱們修改css中container中的代碼

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

上面的代碼等價與下面的代碼

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

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

 3,grid-template-areas

指定的 網格區域(Grid Area) 名稱來定義網格模板。重複網格區域的名稱致使內容跨越這些單元格。這個語法自己可視做網格的可視化結構。

值

 

• <grid-area-name>：由網格項的 grid-area 指定的網格區域名稱
• .（點號） ：表明一個空的網格單元
• none：不定義網格區域

 

修改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;
    }

效果圖

由於咱們不肯定有幾行，因此咱們設置的是auto，這樣咱們就不能設置行高了，子元素的高度是多少它的高度就是多少，可是咱們能夠設置子元素的高度。就能設置網格的高度了。

因此咱們設置子元素高度爲100px，對container下的div設置高度

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

效果圖爲

這樣，咱們就設置好了這樣一個網格，第一行區域名稱爲「one」，第二行一二列區域名稱爲「two」，第二行第四列區域名稱爲「three」，第三行區域名稱爲「four」，第四行一二列名稱爲「five」，第四行三四列名稱爲「six」。

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

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

咱們修改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;
    } 

效果圖爲

下面兩段代碼等價，下面的代碼上上面的簡寫。

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

    grid-gap: 10px;

5,justify-items / align-items

沿着 行軸線(row axis) 或列軸線（column axis）對齊 網格項(grid items) 內的內容。該值適用於容器內的全部網格項。

值

 

• start：將內容對齊到網格區域(grid area)的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填滿網格區域寬度（默認值）

修改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

有時，咱們的網格合計大小可能小於其 網格容器(grid container) 大小。 好比咱們的全部 網格項(grid items) 都使用像 px 這樣的非靈活單位設置大小，咱們又設置了容器的大小。在這種狀況下，您能夠設置網格容器內的網格的對齊方式。 

值

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

爲了效果明顯，咱們規定一下容器的大小。

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;
    }

效果圖

咱們再修改一下值，將整個網格放在容器的中間，修改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;
    }

效果圖爲

剩下的值本身去實驗把。咱們就作到這裏了。

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

爲了方便演示，咱們再添加一個容器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;
    }

效果圖爲

接下來咱們使用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;}

上面代碼的簡寫爲

    .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;}

效果圖爲

咱們就設計出了和container同樣的樣式。

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

指定任何自動生成的網格軌道(grid tracks)（又名隱式網格軌道）的大小。在你明肯定位的行或列（經過 grid-template-rows / grid-template-columns），超出定義的網格範圍時，隱式網格軌道被建立了。

上面咱們建立了一個4×4的網格，那麼當咱們再container1容器中再添加一個div，而且超出4×4的網格了呢，咱們來試一下。

在html中的container和container1中分別添加一個div，設置class分別爲item-h和item-7。

container中添加

 

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

 

container1中添加

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

將css中兩個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;}

效果爲

咱們在css中的container1中添加

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

效果圖

咱們能夠看到超出4×4的網格也別設置了大小，寬100px，高100px。

 9,grid-auto-flow

前面咱們說了grid在咱們沒有設置元素位置時，默認是從上到下，從左到右的按行依次填充，可是這個也是能夠設置。

值

 

• row：告訴自動佈局算法依次填充每行，根據須要添加新行
• column：告訴自動佈局算法依次填入每列，根據須要添加新列
• dense：告訴自動佈局算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺

設置grid-auto-flow：row;就是默認的排列方式。即按行來排列

設置grid-auto-flow：column;就是按列來排列，即一列一列的排完纔開始下一列。

注意：當設置grid-auto-flow：dense;時網格項可能會亂序。

10,justify-self / align-self

沿着 行軸線(row axis)或列軸線（column axis） 對齊 網格項 內的內容。此值適用於單個網格項內的內容。

值

• start：將內容對齊到網格區域的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填充整個網格區域的寬度（這是默認值）

到這裏grid也學了一大部分了，剩下的內容我也沒有弄清楚，畢竟我也是一個初學者。

能夠參考一些這個網址進行深刻了解：http://www.css88.com/archives/8510/comment-page-1