Gird(2)

目錄

• grid 佈局（2）
  • grid區域屬性
    • 網格線名稱
    • grid-template-areas 屬性
    • grid-auto-flow
  • 容器內子元素的屬性

grid 佈局（2）

grid區域屬性

網格線名稱

grid-template-columns 和 grid-template-rows 屬性裏面，還能夠使用方括號指定每一根網格線的名字，方便之後引用

例:

.container{
    display:grid;
    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}

上面的代碼指定網格佈局爲 3*3 ，所以會有4根垂直網格線和4根水平網格線

網格佈局容許一個網格線上有多個名字，好比[fifth-line row-5];

grid-template-areas 屬性

網格佈局容許指定"區域"(area),一個區域由單個或多個單元格組成。
grid-template-areas屬性用於定義區域

.container{
    display:grid;
    grid-template-columns: repeat(3,100px);
    grid-template-rows: repeat(3,100px);
    grid-template-areas:'a b c'
                        'd e f'
                        'g h i';
}

完整代碼

```

1

2

3

4

5

6

7

8

9

```

上面代碼就是9個單元格，子元素雖然是按照1-9的順序書寫的html代碼，但是我在每一個子元素上設置他們對應的grid-area座標，他們就會去相應的地點。

實例佈局

示例代碼

```html

header

aside

main

footer

```

經過區域實現的一種響應式佈局

在區域中能夠使用.這個來佔位，表明這個位置沒有東西，空白

示例代碼

上面的方法經過grid屬性模擬柵欄佈局，來實現各類功能。而這個響應式的實現，再也不是須要使用html+css實現aside的移動，而只須要改變css中的grid-areas屬性便可實現

而這樣純css代碼實現div的移動，咱們可稱之爲源代碼的獨立性，即html只是用來標記內容，css來設計樣式。

tip:最後補充一點 區域的命名會影響到網格線，每一個區域的起始網格線會自動命名爲"區域名-start"，終止網格線自動命名爲"區域名-end"。

grid-auto-flow

劃分網格之後，容器的子元素會按照順序，自動放置在每個網格。默認的放置順序是"先行後列"，即先填滿第一行，在開始放入第二行。

而這個順序由grid-auto-flow屬性決定，默認值是row,及先行後列,也能夠將他設成columns，變成"先列後行"。

column : 1 4 7     row : 1 2 3
         2 5 8           4 5 6
         3 6 9           7 8 9

grid-auto-flow屬性除了設置成row和column,還能夠設成 row dense 和 columns dense。 這兩個值主要用於，某些項目指定位置之後，剩下的項目怎麼放置

row dense : 先填滿橫行，儘可能不出現空格
column dense : 先填滿列，儘可能不出現空格

容器內子元素的屬性

項目的位置是能夠指定的，具體方法就是指定項目的四個邊框，分別定位在哪根網絡線

grid-column-start : 左邊框所在的垂直網格線
grid-column-end : 右邊框所在的垂直網格線
grid-row-start : 上邊框所在的水平網格線
grid-row-start : 下邊框所在的水平網格線

例：

.item1{
        grid-column-start:2;
        grid-column-end:4;
    }
    /*起始於第二根網格線，第四根垂直網格線結束*/