Grid 佈局學習

Grid佈局是微軟在2010年提出來的一種新的佈局方式，到2016年的時候提交了該佈局的草案，通過這三四年的發展，grid佈局慢慢變的成熟，兼容性也愈來愈好，能夠適當學起來用起來了

本次學習的幾個點：

• CSS佈局發展過程
• Grid佈局的優勢以及相關術語介紹
• Grid佈局的使用
• 注意事項、備註
• 參考資料

在咱們開始學習前，先了解下它能用在什麼狀況下

例如這個頁面就是用grid佈局的:

Grid佈局

網格

在瞭解和學習網格佈局以前，咱們先了解下什麼是網格，網格是一組相交的水平和垂直線，它定義了網格的行和列

CSS佈局發展過程

• table 表格佈局：table 比其餘 html標記佔更多的字節、佈局比較死板不靈活、會阻擋瀏覽器渲染引擎的渲染順序從而使得加載速度慢
• float + position方式佈局：使用 float 浮動和 position 定位去佈局，float會使得元素脫離文檔流，浮動高度塌陷，還須要額外的清除浮動解決這種高度塌陷、不易於垂直居中等問題
• flexbox 彈性佈局：一維佈局，最適合應用於程序的組件和比較小規模的佈局，比較好用並且支持性較好
• grid 網格佈局：二維佈局，適用於大規模的佈局

例如：下面這兩種類型的佈局就很適合用grid佈局：

~備註~

本人認爲Grid佈局的出現並非要取代上面的幾種佈局方式，並且跟上面的幾種方式一塊兒結合使用，用更簡潔的代碼實現頁面佈局

Grid佈局的優勢

優點

• 固定或彈性的軌道尺寸：能夠給每一個軌道設置固定的尺寸，也能夠設置auto | 1fr | 10% 等彈性的尺寸，實際展現的軌道大小會隨着父級的寬高變化而變化

• 定位項目：能夠給每一個子項設置具體所佔據的位置

• 建立隱式的軌道：當子項設置的定位位置超出了父級設定的軌道大小，會建立隱式的軌道

• 對齊控制：和flexbox同樣，有多種對齊方式的控制

• 控制重疊內容，直接在子項上設置z-index的值便可

兼容性

pc端的瀏覽器的兼容性仍是不錯的，IE10和11須要添加-ms-來實現兼容

移動端須要注意的是:ios10.3版本如下不支持，使用需斟酌或者作好兼容處理

Grid佈局中的相關術語

1. Grid Container : 網格容器，一個元素應用了 display: grid; 後就是一個網格容器了，它是全部網格項的父元素，例以下面的代碼裏<div class="grid"></div>就是網格容器

// html
<div class="grid">
	<div class="grid-item1">grid-item1</div>
	<div class="grid-item2">grid-item2</div>
	<div class="grid-item3">grid-item3</div>
	<div class="grid-item4">grid-item4</div>
	<div class="grid-item5">grid-item5</div>
	<div class="grid-item6">grid-item6</div>
</div>

//css
.grid {
	display: grid;
}
複製代碼

2. Grid item : 網格項，上面的 grid-item 就是網格子項

3. Grid Line : 網格線，組成網格項的分界線，虛擬的，下圖的3×4的網格里有4條水平網格線和5條垂直網格線

4. Grid track : 軌道，網格軌道，兩個相鄰的網格線之間爲網格軌道

以下圖：共有7個網格軌道，水平方向3個網格軌道，垂直方向4個網格軌道

5. Grid Cell : 網格單元，兩個相鄰的列網格線和兩個相鄰的行網格線組成的網格單元，網格項是HTML裏的dom元素，而網格單元是定義網格容器的時候分割出來的網格單元

6. Grid area: 網格區域: 四個網格線包圍的總區域，與網格單元不一樣的是，網格單元必須是相鄰的網格線

7. 單位：fr 單位：剩餘空間分配數，用於在一系列長度值中分配剩餘空間，按數字比例分配

例如：

網格總寬度若是是600px，那麼下面這種設置中，1fr = (600 - 50 - 150) * (1 / (1+3)) = 100px

.grid {
	grid-template-columns: 50px 1fr 3fr 150px;
}
複製代碼

容器中的屬性

查看練習demo

1. display

它的值爲：

• display: grid;：設置爲容器元素

• display: inline-grid 設置爲容器元素，且爲行內網格

• display: subgrid ：若是網格容器自己是網格項，此屬性用來繼承父網格容器的列和行大小

它的兼容性不好，基本能夠先不瞭解

2. grid-template: 定義行與列的軌道大小，它是一個複合寫法，具體屬性包含了：

• grid-template-rows: 水平方向劃分行，值爲每一行的高度，空格分隔
• grid-template-columns: 垂直方向劃分列，值爲每一列的寬度，空格分隔
• grid-template-areas: 網格劃分區域，值爲命名

語法：

.container {
	grid-template-rows: <track-size> | <line-name> <track-size>;
	grid-template-columns: <track-size> | <line-name> <track-size>;
	grid-template-areas: 
	    <grid-area-name> | . | none
	    <grid-area-name> | . | none
}

// 複合寫法：
.container {
	grid-template: <grid-template-rows> / <grid-template-columns>
}

複製代碼

• <track-size>: 可使用css的長度單位、百分比、auto或者一個新的單位fr 其中 auto 是用來表示剩下的長度 單位 fr ：除去其餘的設定的固定的寬度之外，剩下的按比例分，相似於flex中的flex: n;

• <line-name>: 能夠給每條網格線設置名稱 [任何名稱]

• <grid-area-name> : 區域名稱 "任何名稱"

.container {
	grid-template-rows: [第一條行線] 25% 100px auto;
	grid-template-columns: [第一條列線] 100px 20px auto 40px;
}
複製代碼

表現爲以下：

grid-template-areas: 設置區域名稱的

3. grid-gap ：行和列之間的間隔寬度 ， 它是兩個屬性的複合寫法

• grid-gap-rows: 行與行之間的間隔

• grid-gap-columns: 列與列之間的間隔

.container {
	grid-gap-rows: 20px;
	grid-gap-columns: 10px; 
}

// 複合寫法：
.container {
	grid-gap: 20px 10px;
}
複製代碼

4. place-items ： 每一個單元格內部的水平垂直對齊方式的複合寫法

• justify-items: 水平方向對齊方式
• align-items: 垂直方向對齊方式

兩個屬性的值都有如下幾種

• stretch : 默認值，水平|垂直 內容拉伸填充
• start: 水平|垂直 （寬度|高度）收縮爲內容大小，（左側|上側）對齊
• end：水平|垂直 （寬度|高度）收縮爲內容大小，（右側|下側）對齊
• center：水平|垂直 （寬度|高度）收縮爲內容大小，居中對齊

.container {
	place-items: <align-items> / <justify-items>;
}
複製代碼

5. place-content: 如下兩個屬性的複合寫法，是表示網絡單元的水平佈局方式

• justify-content: 僅在網格總寬度小於grid容器寬度時候有效果

值分爲如下幾種：

• stretch：拉伸，寬度填滿grid容器，須要定的網格尺寸爲auto的時候有效，若是定死寬度則沒法拉伸
• start：左對齊
• end：右對齊
• center：居中對齊
• space-between：兩端對齊
• space-around： 每一個grid子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半
• space-evenly：每一個grid子項兩側空白間距徹底相等

• align-content: 網絡元素的垂直方向佈局方式, 若是grid子項只有一行則不生效，它的值同上

6. grid-auto: 如下三個屬性的複合寫法

grid-auto的相關demo

• grid-auto-rows:網格項目多餘設置的單元格，會建立隱式軌道

• grid-auto-columns:網格項目多餘設置的單元格，會建立隱式軌道

.container {
	grid-auto-rows: 100px;
	grid-auto-columns: 70px;
}
複製代碼

• grid-auto-flow: 控制沒有明確指定位置的grid子項的放置方式

值分爲如下幾種：

• row: 默認值，沒有指定位置的網格按順序水平方向排列
• column: 沒有指定位置的網格垂直順序排列
• row dense：自動排列啓動密集排序，水平方向
• column dense：自動排列啓動密集排序，垂直方向

看示例 demo

7. grid: 如下幾個屬性的複合寫法：

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

具體設置值以下：

1.grid:none：全部子屬性都是初始化的值

2.grid: <grid-template>

3.grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?

4.grid: auto-flow & dense ? <grid-auto-rows> ? / <grid-template-columns>
複製代碼

auto-flow： 表示的值爲 row | column，可是統一使用 auto-flow來表示，具體須要看它放置的位置在哪裏，若是放置在 / 的左側，就表示 grid-auto-flow: row， 若是放在右側，就表示 grid-auto-flow: column

grid: 100px 60px / 1fr 2fr
至關於：
    grid-template-rows: 100px 60px;
    grid-template-columns: 1fr 2fr;

3.grid: 100px 60px / auto-flow 1fr 2fr

至關於：
grid-template-rows: 100px 60px;
grid-auto-columns: 1fr 2fr;
grid-auto-flow: column

4.grid: auto-flow dense 100px 60px / 1fr 2fr;

至關於：
grid-auto-rows: 100px 60px
grid-template-columns: 1fr 2fr;
grid-auto-flow: row dense

複製代碼

使用grid複合寫法的例子： grid複合寫法demo

以上屬性都是外層容器屬性的值

做用在容器子項上的屬性

操做demo

1. grid-column: 如下兩個屬性的複合寫法

• grid-column-start
• grid-column-end

.item {
	grid-column-start: <name> | <number> | span <name> | span <number>
	grid-column: <start-line> <end-line>
}
複製代碼

值的含義：

<name>自定義網格線的名稱

<number> 從第幾條網格線開始

span <name> 當前網格會自動擴充，直到命中指定的網格線名稱

span <number> 當前網格會自動跨越指定的網格數量

auto 全自動，包括定位和跨度

例如：下圖中的item-a定義了它從第一條水平方向的網格線到第三條水平方向的網格線，從第2條垂直網格線到第3條垂直網格線，也就是佔據了第一、2行第2列

2. grid-row: 如下兩個屬性的複合寫法

• grid-row-start
• grid-row-end

.item {
	grid-row-start: <name> | <number> | span <name> | span <number>
	grid-row: <start-line> <end-line>
}
複製代碼

3. grid-area: 當前網格所佔區域，使用grid-template-areas自定義網絡區域，使用grid-area讓grid子項指定這些使用區域，就自動進行了區域分佈 例如：

grid-area：
<name> 區域名稱，由容器屬性grid-template-area建立
<row-start> / <column-start> / <row-end> / <column-end> 佔據網格區域的縱橫起始位置
複製代碼

4. justify-self: 單個網格元素的水平對齊方式

值分爲如下幾種：

• stretch（默認）:拉伸，水平填充
• start 水平尺寸收縮爲內容大小，沿着網格線左側對齊
• end 水平尺寸收縮爲內容大小， 沿着網格線右側對齊
• center 水平尺寸收縮爲內容大小，當前區域內部水平居中對齊顯示

5. align-self: 單個網格元素的垂直對齊方式 例如：

• stretch（默認）:拉伸，垂直填充
• start 垂直尺寸收縮爲內容大小，沿着網格線上側對齊
• end 垂直尺寸收縮爲內容大小， 沿着網格線下側對齊
• center 垂直尺寸收縮爲內容大小，當前區域內部垂直居中對齊顯示

以上兩個屬性可使用 place-self 去寫 place-items：<align-self> / <justify-self>

grid佈局中的css函數

查看css函數的相關demo

1. repeat(): 跟蹤列表的重複片斷，容許大量重複顯示模式的行或列以以更緊湊的方式編寫

可用範圍：grid-template-columns 和 grid-template-rows

語法： repeat(<repeat>, <value>)

<repeat>: 取值有如下幾種：

1. 整數，肯定確切的重複次數

2. `<auto-fill>`: 以網格項爲準自動填充，須要結合minmax()函數來使用

3. `<auto-fit>` : 以網格容器爲準自動填充，須要結合minmax()函數來使用
複製代碼

<value>： 取值有如下幾種：

1. 固定長度

2. 百分比

3. fr單位

4. max-content: 表示網格的軌道長度自適應內容最大的那個單元格

5. min-content：表示網格的軌道長度自適應內容最小的那個單元格

6. auto：不推薦使用
複製代碼

能夠屢次使用

grid-template-columns: 20px auto repeat(3, 1fr) 40px

2. fit-content()：參數是長度值或百分比

公式：min(maximum size, max(minimum size, argument))

它在內容的最小值和參數中取一個最大值，而後再在內容的最大值中取一個最小值

當內容少時，它取內容的長度，若是內容多，內容長度大於參數長度時，它取參數長度，能夠理解爲它能夠控制最大值是多少

3. minmax(min, max) ：定義了長度範圍區間

取值：

1. 固定長度

2. 百分比

3. fr單位

4. max-content: 表示網格的軌道長度自適應內容最大的那個單元格
  
5. min-content：表示網格的軌道長度自適應內容最小的那個單元格

6. auto：不推薦使用
複製代碼

注意事項

• 當元素設置了網格佈局，column、float、clear、vertical-align屬性無效
• grid佈局是二維佈局，適合佈局總體

一個grid的demo

參考資料

張鑫旭空間：grid佈局

MDN：grid

阮一峯：CSS Grid 網格佈局教程