CSS網(wǎng)格布局（Grid）教程

一、概述

CSS網(wǎng)格布局（Grid）是一套二維的頁面布局系統(tǒng)，它的出現(xiàn)將完全顛覆頁面布局的傳統(tǒng)方式。

首先來介紹幾個(gè)概念:

想象一個(gè)三行三列的布局，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條，三行三列的布局每行就會(huì)有4條網(wǎng)格線。
網(wǎng)格軌道就是相鄰兩條平行的網(wǎng)格線之間的部分。

和flex布局一樣，他會(huì)有父容器和子項(xiàng)目，在這兒我們稱為網(wǎng)格容器和網(wǎng)格項(xiàng)。
接下來，我們從網(wǎng)格容器到網(wǎng)格項(xiàng)的各個(gè)基本屬性來介紹網(wǎng)格布局。

二、 網(wǎng)格容器

將屬性 display 值設(shè)為 grid 或 inline-grid 就創(chuàng)建了一個(gè)網(wǎng)格容器，所有容器直接子結(jié)點(diǎn)自動(dòng)成為網(wǎng)格項(xiàng)目。

例1：

網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目占用整個(gè)容器的寬度。

例2：

網(wǎng)格項(xiàng)目按行排列，網(wǎng)格項(xiàng)目寬度由自身寬度決定。

三、顯示網(wǎng)格

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

容器指定了網(wǎng)格布局以后，接著就要?jiǎng)澐中泻土?。grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高。

例3：

網(wǎng)格項(xiàng)目1的行高是50px，網(wǎng)格項(xiàng)目2的行高是100px。

因?yàn)橹欢x了兩個(gè)行高，網(wǎng)格項(xiàng)目3和4的行高取決于其本身的高度。

例4：

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

因?yàn)槎x中只有三列，所以項(xiàng)目4，5，6排在新的一行; 并因?yàn)樗鼈兾挥诘?，2，3列的軌道上，所以其寬度等于定義中第1，2，3列軌道的寬度。

網(wǎng)格項(xiàng)目的第1列，第2列，第3列的寬度分別是 90px, 50px 和 120px 。

四、網(wǎng)格項(xiàng)目跨越行列

網(wǎng)格項(xiàng)目默認(rèn)都占用一行和一列，但可以使用前一節(jié)中定位項(xiàng)目的屬性來指定項(xiàng)目跨越多行或多列。

例5：

通過grid-column-start和grid-column-end屬性值的設(shè)置，使該網(wǎng)格項(xiàng)目跨越多列。

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

justify-content屬性是整個(gè)內(nèi)容區(qū)域在容器里面的水平位置（左中右），align-content屬性是整個(gè)內(nèi)容區(qū)域的垂直位置（上中下）。

這兩個(gè)屬性的寫法完全相同，都可以取下面這些值。（下面的圖都以justify-content屬性為例，align-content屬性的圖完全一樣，只是將水平方向改成垂直方向。）

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

end - 對齊容器的結(jié)束邊框。

center - 容器內(nèi)部居中。

stretch - 項(xiàng)目大小沒有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。

space-around - 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。

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

space-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長度的間隔。

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

有時(shí)候，一些項(xiàng)目的指定位置，在現(xiàn)有網(wǎng)格的外部。比如網(wǎng)格只有3列，但是某一個(gè)項(xiàng)目指定在第5行。這時(shí)，瀏覽器會(huì)自動(dòng)生成多余的網(wǎng)格，以便放置項(xiàng)目。

grid-auto-columns屬性和grid-auto-rows屬性用來設(shè)置，瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個(gè)屬性，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高。

希望我的文章能夠?qū)δ兴鶐椭?/p>