HTML、CSS從零開始

GRID佈局

它將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的佈局

Grid 佈局與 Flex 佈局有一定的相似性，都可以指定容器內部多個專案的位置。但是，它們也存在重大區別。

Flex 佈局是軸線佈局，只能指定“專案”針對軸線的位置，可以看作是一維佈局。

Grid 佈局則是將容器劃分成“行”和“列”，產生單元格，然後指定“專案所在”的單元格，可以看作是二維佈局。

GRID佈局預熱

容器和專案

<！—— 以上程式碼section為容器、div為專案（專案不包括p標籤） ——>

行和列

容器裡面的水平區域稱為“行”，垂直區域稱為“列”。

單元格

行和列的交叉區域，稱為“單元格”。

網格線

劃分網格的線，稱為“網格線”。水平網格線劃分出行，垂直網格線劃分出列。

GRID屬性

容器屬性:新增在容器元素

1、啟動網格佈局

display：grid/* 屬性值： grid 為塊狀網格容器（容器自上而下排列） line-grid 為內聯網格容器（容器橫向排列）*/

2、劃分行和列

grid-template-columns：grid-template-rows：

屬性值：絕對大小（根據列數或者行數確定值的個數）例：200px 200px 200px

grid-template-columns：200px 200px 200pxgrid-template-rows：200px 200px 200px

屬性值：百分比（根據列數或者行數確定值的個數）例：33。33% 33。33% 33。33%

grid-template-columns：33。33% 33。33% 33。33%grid-template-rows：33。33% 33。33% 33。33%

功能函式：repeat（）

repeat（引數1，引數2）/* 引數1 ：重複的次數引數2 ：重複的數值或者重複的模式 eg： grid-template-columns：repeat（3，33。33%）；等同 grid-template-columns：33。33% 33。33% 33。33%*/

auto-fill關鍵字（自動填充）

grid-template-columns：repeat（auto-fill，33。33%）；/* 當專案寬高固定，容器不固定的情況下，自動填充網格列數*/

fr關鍵字（列寬片段）

為了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意為“片段”）。如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。

grid-template-columns：1fr 3fr 1fr；grid-template-rows：repeat（3，100px）；

minmax（）功能函式

grid-template-columns： 1fr 1fr minmax（100px， 1fr）；/* minmax（100px， 1fr）表示列寬不小於100px，不大於1fr*/

auto 關鍵字自動填充

grid-template-columns：30px auto 20px；grid-template-rows：repeat（3，100px）；

網格線名稱

grid-template-columns：［c1］ 100px ［c2］ 100px ［c3］ auto ［c4］；grid-template-rows：［r1］ 100px ［r2］ 100px ［r3］ auto ［r4］；/*指定網格佈局為3行x3列，因此有4根垂直網格線和4根水平網格線。方括號裡面依次是這八根線的名字。*/

3、設定行間距 || 列間距

grid-row-gap：20px /* 行間距 */grid-column-gap：20px /* 列間距 */grid-gap：30px 30px /* 複合式寫法 *//*注：新版本已經省略 grid- 字首 row-gap \ column-gap \ gap*/

4、指定“區域”（area），一個區域由單個或多個單元格組成。

display： grid；grid-template-columns： 100px 100px 100px；grid-template-rows： 100px 100px 100px；grid-template-areas： ‘a b c’ ‘d e f’ ‘g h i’；/* 將整個網格容器分為9個區域，每個區域對應一個單元格透過grid-area 指定專案名稱。*/display：grid；grid-template-columns：repeat（3，100px）；grid-template-rows：repeat（3，100px）；grid-template-areas： ‘a a a’ ‘。。 b’ ‘。 c c’；

5、規劃子元素放置的順序（預設為先排行後排列）

grid-auto-flow： column | row；/* row dense和column dense。這兩個值主要用於，某些專案指定位置以後，剩下的專案怎麼自動放置。*/

6、設定單元格內容在單元格內水平 | 垂直的對齊方

justify-items： start | end | center | stretch；align-items： start | end | center | stretch；place-items： /*複合式寫法*//* start：對齊單元格的起始邊緣。 end：對齊單元格的結束邊緣。 center：單元格內部居中。 stretch：拉伸，佔滿單元格的整個寬度（預設值）。*/

7、設定整個內容區域在容器裡面的水平 | 垂直對齊方式

justify-content：start | end | center | stretch | space-around | space-between | space-evenly；align-content： start | end | center | stretch | space-around | space-between | space-evenly；place-content： /* 複合式寫法 *//* start - 對齊容器的起始邊框。 end - 對齊容器的結束邊框。 center - 容器內部居中。 stretch - 專案大小沒有指定時，拉伸佔據整個網格容器。 space-around - 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與容器邊框的間隔大一倍。 space-between - 專案與專案的間隔相等，專案與容器邊框之間沒有間隔。 pace-evenly - 專案與專案的間隔相等，專案與容器邊框之間也是同樣長度的間隔。*/

專案屬性：新增在子元素上面

1、指定專案的四個邊框，分別定位在哪根網格線。

grid-column-startgrid-column-endgrid-row-startgrid-row-end/* grid-column-start屬性：左邊框所在的垂直網格線 grid-column-end屬性：右邊框所在的垂直網格線 grid-row-start屬性：上邊框所在的水平網格線 grid-row-end屬性：下邊框所在的水平網格線*/grid-column-start：1；grid-column-end：3；grid-row-start： 2；grid-row-end：4；