grid佈局學習

時間 2019-11-08

標籤 grid 佈局學習简体版

原文原文鏈接

關於css佈局的問題，因爲我css運用不太熟練，在遇到稍微複雜的狀況時只能各類百度，也從未總結過，但願經過這個學習，能熟練運用到項目當中。css

參考：阮一峯Grid佈局教程html

1、概述

Grid，顧名思義，就是網格佈局。分紅的一個個小小的網格自由組合，經過使用者的運用能力，來突破以往傳統佈局的侷限。由Grid能夠想到flex佈局。跨域

關於二者的區別：flex是軸線佈局，全部的佈局方式是針對軸線展開，能夠看作是一維佈局。而Grid能夠當作是行與列的佈局，即二維佈局。功能固然比一維佈局強大。瀏覽器

2、概念

2.1 容器與項目

採用Grid佈局的區域，稱之爲容器-container，容器裏採用網格的子元素，稱之爲項目-item。bash

<div class="father"> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div>複製代碼

.father是container，裏面的div是item。函數

注意： item只能是container的子元素，而不是孫子元素之類的。。上面例子的p標籤就不是item。佈局

2.2 行與列

容器裏水平方向爲行-row, 豎直方向爲列-column.學習

2.3 單元格

行與列交叉的區域叫作單元格-cellflex

m行n列產生m*n個單元格。spa

2.4 網格線

分網格的線就叫網格線-grid line。正常狀況下，n行有n+1根網格線。

3、容器屬性

容器屬性是指container上的屬性。

3.1 display

display: grid;  // 指定一個元素爲容器複製代碼

以下例子：

div {      
    display: grid;    
}    
p {      
    border: 1px solid #000000;    
}複製代碼

<body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> </body>複製代碼

默認狀況下，container是塊級元素，也能夠設置成行內塊級元素。

display: inline-grid;複製代碼

以下例子：

<style>    
    div {      
        display: inline-grid;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

<body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> </body>複製代碼

選中元素能夠看到

注意：容器設置爲grid、inline-grid以後，容器上的float，display： inline-block，display： table-cell、vertical-align、column-*都會失效。(這一項：在阮一峯老師教程中出現，可是我在上面的例子中給容器div加上float:left,並給容器再加一個兄弟div ，float仍是起作的用。。不知道這個解釋是在什麼狀況下)

3.2 grid-template-columns grid-template-rows

grid-template-columns定義每一列的列寬， grid-template-rows定義每一行的行高。

以下面的列子

<style>    
    div {      
        display: grid;      
        grid-template-columns: 100px 100px 100px;      
        grid-template-rows: 100px 100px 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

<body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <div>222</div> </body>複製代碼

效果以下

也可使用百分比

<style>    
    div {      
        display: grid;      
        grid-template-columns: 33.33% 33.33% 33.33%;      
        grid-template-rows: 100px 100px 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

<body> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <div>222</div> </body>複製代碼

3.2.1 repeat

上面的寫法能夠看到，若是有不少均等的行與列，這樣寫很費勁，能夠用repeat函數

<style>    
    div {      
        display: grid;      
        grid-template-columns: repeat(3, 33.33%);      
        grid-template-rows: 100px 100px 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

repeat有倆參數，重複次數，重複的大小。

repeater還能重複某種模式

<style>    
    div {      
        display: grid;      
        grid-template-columns: repeat(2, 33.33% 10%);      
        grid-template-rows: 100px 100px 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.2.2 auto-fill關鍵詞

使用狀況：容器大小不肯定+單元格大小肯定+但願每行/每列能容納儘量多的單元格。

auto-fill是自動填充的意思。

<style>    
    div {      
        display: grid;      
        grid-template-columns: repeat(auto-fill, 30%);      
        grid-template-rows: 100px 100px 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.2.3 fr關鍵字

fraction的縮寫-片斷的I意思。是爲了表示比列關係。若是兩行，一個1fr,一個2fr，後者是前者行高的兩倍。

<style>    
    div {      
        display: grid;      
        grid-template-columns: repeat(auto-fill, 30%);      
        grid-template-rows: 2fr 1fr 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.2.4 minmax()函數

它表示一個長度範圍，接受倆參數，第一個-最小值，第二個-最大值。

<style>    
    div {      
        display: grid;      
        grid-template-columns: 1fr 2fr minmax(100px, 1fr);      
        grid-template-rows: 2fr 1fr 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.2.5 auto關鍵字

表示瀏覽器本身決定

<style>    
    div {      
        display: grid;      
        grid-template-columns: 200px 20px auto;      
        grid-template-rows: 2fr 1fr 100px;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.2.6 網格線的名稱

每一行與每一列均可以使用方括號來指定此網格線的名稱，以便於以後引用。

grid-template-columns: [x1] 200px [x2] 20px [x3] auto [x4];複製代碼

網格線容許一根線有多個名字，好比： [x-1 22 min]

3.3 grid-gap/grid-row-gap/grid-column-gap

看字面就能明白，表示的是間距。

grid-gap是行間距與列間距的簡寫。

若是grid-gap只寫一個值，表示行間距與列間距相等。

grid-gap: <grid-row-gap> <grid-column-gap>;複製代碼

<style>    
    div {      
        display: grid;      
        grid-template-columns: [x1] 200px [x2] 20px [x3] auto [x4];      
        grid-template-rows: 2fr 1fr 100px;      
        grid-row-gap: 20px;      
        grid-column-gap: 20px;      
        /* grid-gap: 20px 20px; */    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

3.4 grid-template-areas屬性

網格佈局容許指定區域，此屬性用於定義區域，一個區域能夠由一個或者多個單元格組成。

<style>    
    div {      
        display: grid;      
        grid-template-columns: [x1] 200px [x2] 20px [x3] auto [x4];      
        grid-template-rows: 2fr 1fr 100px;      
        grid-row-gap: 20px;      
        grid-column-gap: 20px;      
        grid-template-areas: 'a b c''d e f''g h i';      
        /* grid-gap: 20px 20px; */    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

這表示定義了9個區域。

多個單元格合併成一個區域的簡寫：

grid-template-areas: 'a a a' 'b b b' 'c c c';複製代碼

這表示就三個區域。

若是某些區域不須要利用，就用.表示

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';複製代碼

注意：區域的命名會影響網格線。每一個區域的起始網格線，會自動命名爲區域名-start，區域名-end。

3.5 grid-auto-flow屬性

劃分網格以後，容器的item會按照順序自動排列到網格中。默認的放置順序是「先行後列」。這個順序由grid-auto-flow決定，更改grid-auto-flow的值就能更改放置順序。

grid-auto-flow: column;複製代碼

它的值除了row/column，還有row dense和column dense。這兩個值主要用來指導某些item指定位置以後，剩下的item怎麼放置。

如圖，若是1和2各佔兩個單元格，在默認row的值下，第一行空出一個單元格。可是在row-dense值下，效果以下圖

grid-auto-flow: row dense;複製代碼

3.6 justify-items、align-items、place-items

justify-items設置單元格的水平位置(左中右),align-items設置單元格的垂直位置（上中下）。

這兩個屬性的值相同

<style>    
    div {      
        display: grid;      
        grid-template-columns: [x1] 200px [x2] 20px [x3] auto [x4];      
        grid-template-rows: 2fr 1fr 100px;      
        grid-row-gap: 20px;      
        grid-column-gap: 20px;      
        justify-items: end;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

上面的例子，將justify-items的值設置爲stretch，效果以下

place-items是align-items與justify-items的簡寫。

place-items: <align-items> <justify-items>;複製代碼

若是省略一個值則表示兩個值相等。

3.7 justify-content、align-content、place-content

justify-content表示整個內容區域在整個容器內的水平位置（左中右），align-content表示整個內容區域在整個容器內的垂直位置（上中下）。

start- 對齊容器的起始邊框

end-對齊容器的結束邊框

center-容器內部居中

stretch-容器大小沒指定時網格將容器佔滿

space-around-每一個item兩側間距相等，因此項目之間的間距比項目與容器的間距大一倍

space-between-項目與項目間距相等，項目與容器之間沒有間距。

<style>    
    div {      
        display: grid;      
        grid-template-columns: [x1] 200px [x2] 20px [x3] auto [x4];      
        grid-template-rows: 2fr 1fr 100px;      
        grid-row-gap: 20px;      
        grid-column-gap: 20px;      
        justify-items: stretch;      
        justify-content: space-between;    
    }    
    p {      
        border: 1px solid #000000;    
    }  
</style>複製代碼

space-evenly - 項目與項目、項目與容器的間距都相等。

place-content是justify-content和align-content的簡寫。

place-content: <align-content> <justify-content>複製代碼

3.8 grid-auto-columns、grid-auto-rows

有時候某些item會須要出如今現有的網格以外，好比有3行，可是item要出現弟5行，就會自動生成剩下兩行。

grid-auto-columns、grid-auto-rows的寫法與grid-template-columns、grid-template-rows的寫法徹底一致。若是不指定這兩個值的大小，那麼瀏覽器會根據單元格內容的大小來決定新增單元格的行高與列寬。

好比下面的例子：2*2的單元格，新的第6項指定在第4行第3列。

<style>    
    #container {      
        display: grid;      
        grid-template-columns: 100px 100px;      
        grid-template-rows: 100px 100px;      
        grid-auto-rows: 50px;    
    }    
    .item {      
        font-size: 2em;      
        text-align: center;      
        border: 1px solid #e5e4e9;    
    }    
    .item-1 {      
        background-color: #ef342a;    
    }    
    .item-2 {      
        background-color: #f68f26;    
    }    
    .item-3 {      
        background-color: #4ba946;    
    }    
    .item-4 {      
        background-color: #0376c2;    
    }    
    .item-5 {      
        background-color: #c077af;      
        grid-row-start: 4;      
        grid-column-start: 3;    
    }  
</style>複製代碼

<body> <div id="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> </div> </body>複製代碼

3.9 grid-template屬性與grid屬性

grid-template是grid-template-columns和grid-template-rows、grid-template-areas的簡寫。

grid是grid-template-columns、grid-template-rows、grid-template-areas、grid-auto-flow、grid-auto-columns、grid-auto-rows的縮寫。

雖然簡寫寫的東西少，可是不易讀。

4、項目屬性

4.1 grid-column-start、grid-column-end、grid-row-start、grid-row-end

項目的位置是能夠指定的。方法是指定項目的四個邊框分別定位在哪根網格線。

下面的例子：

<style>    
    .item-1 {      
        background-color: #ef342a;      
        grid-column-start: 2;      
        /*左邊框所在的垂直網格線 */      
        grid-column-end: 4;      
        /*右邊框所在的垂直網格線*/    
    }  
</style>複製代碼

1號：左側是第2根右側是第四根

這時候除了1號，5號，其餘都沒指定位置，其餘的都是按照grid-auto-flow來佈局的。這個屬性默認的是row。

這四個屬性的值，還能夠設置爲網格線的名稱。還能夠用span關鍵字，表示「跨域」。即左右邊框（上下邊框）跨越了多少個單元格。

<style>    
    #container {      
        display: grid;      
        grid-template-columns: [x1] 100px [x2] 100px [x3];      
        grid-template-rows: [y1] 100px [y2] 100px [y3];    
    }    
    .item {      
        font-size: 2em;      
        text-align: center;      
        border: 1px solid #e5e4e9;    
    }    
    .item-1 {      
        background-color: #ef342a;      
        grid-column-start: x2;      
        /*左邊框所在的垂直網格線 */      
        grid-column-end: x3;      
        /*右邊框所在的垂直網格線*/    
    }    
    .item-2 {      
        background-color: #f68f26;    
    }    
    .item-3 {      
        background-color: #4ba946;    
    }    
    .item-4 {      
        background-color: #0376c2;    
    }  
</style>複製代碼

<body> <div id="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> </div> </body>複製代碼

<style>    
    .item-1 {      
        background-color: #ef342a;      
        grid-column-start: span 2;    
    }  
</style>複製代碼

使用這四個屬性，若是發生了項目重疊，就要用z-index來指定重疊的層級。

4.2 grid-column、grid-row

根據上面的規律不難判斷，grid-column是grid-column-start和grid-column-end的縮寫，而grid-row是grid-row-start和grid-row-end的縮寫。

4.3 grid-area

grid-area指定項目放在哪個區域

<style>    
    #container {      
        display: grid;      
        grid-template-columns: [x1] 50% [x2] 50% [x3];      
        grid-template-rows: [y1] 50% [y2] 50% [y3];      
        grid-template-areas: 'a b''a b';    
    }    
    .item {      
        font-size: 2em;      
        text-align: center;      
        border: 1px solid #e5e4e9;    
    }    
    .item-1 {      
        background-color: #ef342a;      
        /* grid-column-start: span 2; */      
        grid-area: a;    
    }    
    .item-2 {      
        background-color: #f68f26;    
    }    
    .item-3 {      
        background-color: #4ba946;    
    }    
    .item-4 {      
        background-color: #0376c2;    
    }  
</style>複製代碼

他還能夠當作grid-row-start、grid-row-end、grid-column-start、grid-column-end的簡寫。

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}複製代碼

4.4 justify-self、align-self、place-self屬性

justify-self設置單元格內容的水平位置（左中右），值與justify-items一致，可是隻用於單個項目。align-self設置單元格內容的垂直位置（上中下），與align-items的值一致，可是也只用於單個項目。place-self是兩者的簡寫。

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}複製代碼

start：對齊單元格的起始邊緣。end：對齊單元格的結束邊緣。center：單元格內部居中。stretch：拉伸，佔滿單元格的整個寬度（默認值）。複製代碼

<style>    
    #container {      
        display: grid;      
        grid-template-columns: [x1] 50% [x2] 50% [x3];      
        grid-template-rows: [y1] 50% [y2] 50% [y3];      
        grid-template-areas: 'a b''a b';    
    }    
    .item {      
        font-size: 2em;      
        text-align: center;      
        border: 1px solid #e5e4e9;    
    }    
    .item-1 {      
        background-color: #ef342a;      
        justify-self: start;      
        grid-area: a;    
    }    
    .item-2 {      
        background-color: #f68f26;    
    }    
    .item-3 {      
        background-color: #4ba946;    
    }    
    .item-4 {      
        background-color: #0376c2;    
    }  
</style>複製代碼

<body> <div id="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> </div> </body>複製代碼