Grid 佈局學習

阿新 • • 發佈：2020-10-22

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佈局中的相關術語

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;
}

Grid item: 網格項，上面的grid-item就是網格子項
Grid Line: 網格線，組成網格項的分界線，虛擬的，下圖的3×4的網格里有4條水平網格線和5條垂直網格線

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

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

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

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

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

例如：

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

.grid {
    grid-template-columns: 50px 1fr 3fr 150px;
}

容器中的屬性

檢視練習demo

display

它的值為：

display: grid;：設定為容器元素

display: inline-grid設定為容器元素，且為行內網格

display: subgrid：如果網格容器本身是網格項，此屬性用來繼承父網格容器的列和行大小

它的相容性很差，基本可以先不瞭解

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: 設定區域名稱的

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

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

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

place-items：每個單元格內部的水平垂直對齊方式的複合寫法
justify-items: 水平方向對齊方式
align-items: 垂直方向對齊方式

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

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

.container {
    place-items: <align-items> / <justify-items>;
}

place-content: 以下兩個屬性的複合寫法，是表示網路單元的水平佈局方式
justify-content: 僅在網格總寬度小於grid容器寬度時候有效果

值分為以下幾種：

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

align-content: 網路元素的垂直方向佈局方式, 如果grid子項只有一行則不生效，它的值同上
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

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

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條垂直網格線，也就是佔據了第1、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>
}

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

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

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

值分為以下幾種：

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

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

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

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

grid佈局中的css函式

檢視css函式的相關demo

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

fit-content()：引數是長度值或百分比

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

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

當內容少時，它取內容的長度，如果內容多，內容長度大於引數長度時，它取引數長度，可以理解為它可以控制最大值是多少

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

取值：

1. 固定長度

2. 百分比

3. fr單位

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

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

6. auto：不推薦使用

注意事項

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

Grid 佈局學習

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

CSS學習--grid佈局

grid佈局 grid: <\'grid-template\'> | <\'grid-template-rows\'> / [ auto-flow && dense? ] <\'grid-auto-columns\'>? | [ auto-flow && dense? ] <\'grid-auto-rows\'>?