CSS網格佈局（Grid）教程

1、概述

CSS網格佈局（Grid）是一套二維的頁面佈局系統，它的出現將徹底顛覆頁面佈局的傳統方式。

首先來介紹幾個概念:

想象一個三行三列的佈局，網格線就是構成網格全部的線條，三行三列的佈局每行就會有4條網格線。
網格軌道就是相鄰兩條平行的網格線之間的部分。

和flex佈局同樣，他會有父容器和子項目，在這兒咱們稱爲網格容器和網格項。
接下來，咱們從網格容器到網格項的各個基本屬性來介紹網格佈局。

2、 網格容器

將屬性 display 值設爲 grid 或 inline-grid 就建立了一個網格容器，全部容器直接子結點自動成爲網格項目。

例1：

網格項目按行排列，網格項目佔用整個容器的寬度。

例2：

網格項目按行排列，網格項目寬度由自身寬度決定。

3、顯示網格

屬性grid-template-rows和grid-template-columns

容器指定了網格佈局之後，接着就要劃分行和列。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

例3：

屬性grid-template-rows用於定義行的尺寸，即軌道尺寸。軌道尺寸能夠是任何非負的長度值（px，%，em，等）

網格項目1的行高是50px，網格項目2的行高是100px。

由於只定義了兩個行高，網格項目3和4的行高取決於其自己的高度。

例4：

相似於行的定義，屬性grid-template-columns用於定義列的尺寸。

由於定義中只有三列，因此項目4，5，6排在新的一行; 並由於它們位於第1，2，3列的軌道上，因此其寬度等於定義中第1，2，3列軌道的寬度。

網格項目的第1列，第2列，第3列的寬度分別是 90px, 50px 和 120px 。

4、網格項目跨越行列

網格項目默認都佔用一行和一列，但可使用前一節中定位項目的屬性來指定項目跨越多行或多列。

例5：

經過grid-column-start和grid-column-end屬性值的設置，使該網格項目跨越多列。

5、justify-content 屬性，align-content 屬性

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

這兩個屬性的寫法徹底相同，均可以取下面這些值。（下面的圖都以justify-content屬性爲例，align-content屬性的圖徹底同樣，只是將水平方向改爲垂直方向。）

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

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

center - 容器內部居中。

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

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

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

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

6、grid-auto-columns 屬性，grid-auto-rows 屬性

有時候，一些項目的指定位置，在現有網格的外部。好比網格只有3列，可是某一個項目指定在第5行。這時，瀏覽器會自動生成多餘的網格，以便放置項目。

grid-auto-columns屬性和grid-auto-rows屬性用來設置，瀏覽器自動建立的多餘網格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows徹底相同。若是不指定這兩個屬性，瀏覽器徹底根據單元格內容的大小，決定新增網格的列寬和行高。

---

但願個人文章可以對您有所幫助

歡迎你們滴滴我：rgz987