CSS Grid：頁面網格佈局從未如此簡單

頁面佈局歷來就不是一件讓人省心的事！

若是pc端的兩列布局、表格佈局、聖盃佈局等已經讓你心力交瘁！那麼移動端更加五花八門的佈局確定也是讓你吃盡苦頭！table不知道你用過沒？bootstrap用過沒？antd用過沒？

這些看似花裏胡哨的佈局，其實就像是一張網，若是剛開始佈局的時候就大局在握，後面就有源可尋！若是開始沒梳理好，後面東改西補，你可能會想刪代碼跑路(不能跑)...前面文章有了解過flex佈局（基於軸線的佈局方式）像是一維佈局。這裏的Grid佈局（基於網格式佈局），在頁面排版上將容器分紅更爲明顯的塊級網格，從線（flex軸線）到面（grid網格）會使css佈局更加便利！

1、Grid概念

bootstrap的柵欄格你若是瞭解過，可能會更好的理解這裏的grid！沒有用過也不要緊，下面是grid一些概念，對造上面的圖，方便理解使用grid。

• 容器：採用網格佈局的節點區域就叫作容器。

<div className="cover">
   <div className="item item1 red">1</div> //item是項目
   <div className="item item2 black">2</div>
</div>//cover就是容器

.cover{
    display: grid;
}

• 網格線：用來分割容器的線。分爲水平網格線和垂直網格線，能夠將容器分割成行和列。
• 行和列：水平分割線將容器分割成行（n行須要n+1條水平分割線）；垂直網格線將容器分割成列（n列須要n+1條垂直分割線）
• 單元格：行和列交叉造成了單元格
• 項目：容器內部採用網格定位的子元素，只能是頂層元素，稱爲"項目"

要明白單元格與項目不是一回事。不要混淆了。

概念大體明白了？那就經過容器和項目的屬性來進行網格式佈局吧。

2、容器屬性

下面主要經過7個屬性來設置設置構建容器。

• grid-template-columns/grid-template-rows 設置列/行內容的屬性
• grid-gap 設置列/行間距的屬性
• grid-template-areas 設置單元格區域的屬性
• grid-auto-flow 設置單元格方向屬性
• place-items 設置單元格內內容排列位置的屬性
• place-content 設置整個內容區域在容器裏面的位置的屬性
• grid-auto-columns/grid-auto-rows 設置超出原有網格的單元格屬性

1.grid-template-columns/grid-template-rows

經過display:grid指定節點使用網格佈局後，要開始構建咱們的行和列了。

grid-template-columns 設置列屬性；
grid-template-rows 設置行屬性；

這個屬性能夠用來設置行高和列寬，設置的參數的值的方式有不少種寫法：

下面設置一個3行4列的表格，每一個單元格的空間都是100px；下面主要以列來作示例，行的用法是同樣的哦。這個屬性值比較多，要耐心看

1》使用絕對單位

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

2》使用百分比%

除了使用單位px，還可使用%；

grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 33% 33% 33%;

3》使用repeat方法

當有網格不少且重複時，可使用repeat。repeat接受兩個參數，第一個參數是重複的次數，第二個參數是所要重複的值。

grid-template-rows: repeat(3 , 33%);
grid-template-columns: repeat(4, 25%);

repeat除了重複值，還能夠重複模式：

grid-template-columns: repeat(2, 100px 100px);

假如repeat裏第一個參數改成3，表示重複3次上述模式，因此下圖裏的單元格空間已經超出容器了，假如咱們不想讓它超出，想讓容器自動判斷是否填充，可使用auto-fill關鍵字。

grid-template-columns: repeat(auto-fill, 100px 20px 80px);

4》fr 關鍵字
fr（fraction 的縮寫，意爲"片斷"），若是兩列的寬度分別爲1fr和2fr，就表示後者是前者的兩倍。也能夠結合px使用，會對剩餘空間按照fr進行分配。

grid-template-columns: 50px 3fr 1fr 2fr;

5》minmax()方法

minmax()接受2個參數，最小值和最大值長度範圍，該列/行的大小會根據剩餘空間進行自動分配，大小在長度範圍內。

grid-template-columns:150px 1fr 1fr minmax(50px, 150px);

6》auto 關鍵字

auto關鍵字表示由瀏覽器本身決定長度。

grid-template-columns:100px auto 130px 100px;

第二列會根據剩餘空間自動分配空間。

7》網格線的名稱

除了設置大小，也能設置網格線的名稱，使用方括號，指定每一根網格線的名字，方便之後的引用。4列就須要是5條分割線，分割線的名稱能夠重複。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] auto [c4];

2.grid-gap

grid-gap 屬性用來設置行/列間距的，是grid-row-gap 屬性、grid-column-gap 屬性，的合併簡寫。這3個屬性最新標準也可不寫前綴，寫爲：row-gap、column-gap、gap。

grid-row-gap:10px;
grid-column-gap:20px;
等價於下面代碼：
grid-gap:10px 20px;
等價於：
gap:10px 20px;

3.grid-template-areas

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

grid-template-areas: 
    'a a a a '
    'b b b b ' 
    'd e . g ';
    
1.將單元格寫成相同的名字就能夠合併區域
2.若是某些區域不須要利用，則使用"點"（.）表示。

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

4.grid-auto-flow

劃分網格之後，容器的子元素(項目）會按照順序，自動放置在每個網格。默認的放置順序是"先行後列"，即先填滿第一行，再開始放入第二行。
grid-auto-flow決定放置順序，默認值是row。

grid-auto-flow: column;//可將放置順序改成先列後行

當對**項目**進行指定位置時，看下圖，項目1上面會有一片無人使用的區域。
.item1 {
    grid-row-start: 2;
    grid-row-end: 4;  
}

grid-auto-flow: column dense;
//dense表示要儘量緊密填滿，儘可能不出現空格。

5.place-items

從前面的一些圖能夠看出來，網格佈局界限十分清晰，可是咱們的項目內容卻始終躲靠在單元格的左上角，顯得十分的膽怯。哼！咱們天然要把它揪出來。

place-items決定項目的水平和垂直位置，是justify-items（水平位置） 屬性、align-items（垂直位置） 屬性的合併縮寫：

place-items:center center；

等價於：

justify-items: center 
align-items: center

固然屬性值除了center，具體屬性值以下：

start：對齊單元格的起始邊緣。

end：對齊單元格的結束邊緣。

center：單元格內部居中。

stretch：拉伸，項目大小沒有指定時-佔滿單元格的整個寬度（默認值）。

若是省略第二個值，則瀏覽器認爲與第一個值相等。

6.place-content

咱們把容器設置大點，就會發現整個內容區域在容器裏面的位置也是躲靠在左上角的，能夠經過place-content來設置。使用方法大體同等上面place-items。

place-content是justify-content（水平方向） 屬性、align-content （垂直方向）屬性的縮寫。

place-content:center

屬性有如下取值：

start - 對齊容器的起始邊框。

end - 對齊容器的結束邊框。

center - 容器內部居中。

stretch - 項目大小沒有指定時，拉伸佔據整個網格容器。

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

space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是一樣長度的間隔。

7. grid-auto-columns/grid-auto-rows

當項目超出容器，設置超出原有網格的單元格屬性時，超出的單元格大小將於項目大小同樣。能夠經過grid-auto-columns/grid-auto-rows設置超出部分單元格的大小。

設置一個行超出容器的項目，超出部分行高將於項目同樣高。
.item1 {
    grid-row-start: 4;
    grid-row-end: 5;  
}
設置超出部分行高爲200px，以下圖
grid-auto-rows: 200px;

還有兩種簡寫方法以下：

grid-template 屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式。

grid 屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。

3、項目屬性

• grid-column/grid-row 設置項目位置
• grid-area 設置項目放置區域
• place-self 設置項目在單元格內的位置

1.grid-column/grid-row

上面已經用到過這個屬性，就是設置項目在容器中的位置。
grid-column是grid-column-start（左邊框所在的垂直網格線）、grid-column-end（右邊框所在的垂直網格線）的縮寫。
grid-row是grid-row-start（上邊框所在的水平網格線）、grid-row-end（下邊框所在的水平網格線）的縮寫。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同於 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

1.能夠經過數字指定第幾根線。下面只設置了列的開始和結束，行沒設置，則會在默認位置。
.item1 {
    grid-column-start: 1;
    grid-column-end: 2;  
 }
2.也能夠設置爲指定爲經過**grid-template-columns**設置的網格線的名字。

grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] 100px [c4];
.item1 {
    grid-column-start: c2;
    grid-column-end: c3;  
  }

3.使用span關鍵字，表示"跨越"，即左右邊框（上下邊框）之間跨越多少個網格。
.item1 {
    grid-column-start: 2;  
    grid-column-end: span 2; 
 }
等價於：
.item1 {
    grid-column:2 / span 2  
  }

2.grid-area

設置項目在容器中的區域位置。與上面經過分割線的只用同樣，因此也能作爲分割線4個屬性的縮寫。

grid-template-areas:
    'a a a a'
    'a a a a'
    'd c c c'
.item1 {
    grid-area: a
  } 

等價與：


.item1 {
    grid-area: 1 / 1 / 1 / span 4
  }

3.place-self

與place-items用法一致，但只做用於單個項目,能覆蓋place-items的值。是justify-self（設置單元格內容的水平位置 左中右）、align-self（設置單元格內容的垂直位置上中下）的縮寫。

.cover{
  place-items:center
    
}
.item1 {
    place-self: start
  }

參考文章

若有不妥！歡迎指正