css grid佈局入門

簡介

CSS網格佈局（又稱「網格」），是一種二維網格佈局系統。CSS在處理網頁佈局方面一直作的不是很好。一開始咱們用的是table（表格）佈局，而後用float(浮動)，position（定位）和inline-block（行內塊）佈局，可是這些方法本質上是hack，遺漏了不少功能，例如垂直居中。後來出了flexbox盒佈局，解決了不少佈局問題，可是它僅僅是一維佈局，而不是複雜的二維佈局，實際上它們（flexbox與grid）能很好的配合使用。

瀏覽器支持狀況

在咱們開始正式學習Grid佈局以前，先看一下can i use上grid佈局在各個瀏覽器下的支持狀況是頗有用的，

基本概念

要想學好Grid佈局的用法，基本概念的介紹是少不了的，雖然看起來比較枯燥。

網格容器(Grid Container)

經過display屬性設置屬性值爲grid或inline-grid能夠建立一個網格容器。網格容器中的全部子元素就會自動變成網格項目（Grid item）

網格線(Grid Line)

組成網格線的分界線。它們能夠是列網格線（column grid lines），也能夠是行網格線（row grid lines）而且居於行或列的任意一側

網格軌道(Grid Track)

兩個相鄰的網格線之間爲網格軌道。你能夠認爲它們是網格的列或行

網格單元(Grid Cell)

兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元，它是最小的網格單元

網格區(Grid Area)

網格區是由任意數量網格單元組成

基本屬性及做用

一個簡單例子

要介紹Grid佈局屬性，讓咱們先從一個簡單例子開始：

如上圖所示，若是咱們要實現一個3x3的正方形矩陣，用Grid佈局要怎麼實現？

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.container {
    display: grid;
    width: 200px;
    height: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-row-gap: 10px;
    grid-column-gap:10px;
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
}

如上面代碼所示，3x3的矩陣佈局，用Grid佈局去寫，很是簡單方便，相對於使用其餘佈局來講，Grid佈局的優勢就顯現出來了，那麼，接下來就讓咱們看看Grid局部中那些經常使用屬性：

• grid-template-rows：指定的每一個值能夠建立每行的高度。行高的尺寸能夠是任何非負值，長度能夠是px、%、em等長度單位的值
• grid-template-columns：指定的每一個值來建立每列的列寬
• repeat函數：使用repeat()能夠建立重複的網格軌道。這個適用於建立相等尺寸的網格項目和多個網格項目，repeat()接受兩個參數：第一個參數定義網格軌道應該重複的次數，第二個參數定義每一個軌道的尺寸
• grid-column-gap和grid-row-gap屬性用來建立列與列，行與行之間的間距，間距(Gap)能夠設置任何非負值，長度值能夠是px、%、em等單位值。

網格線號碼定位

依舊是上面html代碼，一個3x3的矩陣，不一樣的是此次咱們經過網線號碼來定位某一個特定方塊。

.container {
    display: grid;
    width: 200px;
    height: 200px;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3; 
/*  grid-area: 2/2/3/3; */
  }

經過上面的代碼咱們能夠實現以下效果：

咱們定位矩陣正中間的小方塊顯示出來，其他的就不顯示了，下面咱們網格線號碼定位的那些屬性：

• 每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增長1
• grid-row-start：表示開始的行網格線序號
• grid-row-end：表示結束的行網格線序號
• grid-column-start：表示開始的列網格線序號
• grid-row-end：表示結束的列網格線序號
• 若是一個網格項目跨度只有一行或一列，那麼grid-row-end和grid-column-end不是必需的
• grid-area：網格區域，也是用來定位，若是隻提供一個值，它指定了grid-row-start和grid-column-start的值。若是提供兩個值，第一個值是grid-row-start、grid-column-start的值，第二個值是grid-row-end、grid-column-end的值，二者之間必需要用/隔開。若是指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end和第四個值對應grid-column-end

網格區域命名定位網格項目

經過上面的例子，咱們知道了如何用網格線去定位網格項目，接下來咱們將學習如何經過網格區域的命名來定位網格項目，老樣子，依舊從一個例子開始：

<div class="container">
    <div class="first"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.container {
    display: grid;
    width: 400px;
    height: 400px;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    grid-template-areas: "header header2 header3" "body body2 body3" "footer footer2 footer3";
}
.container div {
    background-color: #ccc;
    border: 1px solid #333;
}
.container .first {
    grid-row-start: header2;
    grid-row-end: body2;
    grid-column-start: header;
    grid-column-end: header2;
}

如上述例子看到的，原本是一個3x3的矩陣，可是經過區域命名的方式，將第一個div設置了跨兩行兩列，接下來讓咱們一塊兒瞭解一下網格區域命名定位網格項目的相關屬性：

• 像網格線名稱同樣，網格區域的名稱也可使用grid-template-areas屬性來命名。引用網格區域名稱也能夠設置網格項目位置
• 設置網格區域的名稱應該放置在單引號或雙引號內，每一個名稱由一個空格符分開。網格區域的名稱，每組（單引號或雙引號內的網格區域名稱）定義了網格的一行，每一個網格區域名稱定義網格的一列
• grid-row-start和grid-row-end經過區域命名分別設置了行開始的位置和結束，grid-column-start和grid-column-end經過區域命名分別設置了列開始的位置和結束位置

總結

這篇文章簡單的介紹了一些Grid佈局的屬性和用法，但沒有涉及全部，Grid佈局還有不少屬性和用法須要本身去探索，經過不一樣屬性的排列組合，能夠發掘不一樣的玩法，這不正是佈局的魅力嗎？
若是你們想要更加全面的瞭解Grid佈局，能夠去Mozilla Grid板塊去探索發現Grid佈局的魅力。這篇文章若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊收藏