目錄
🔽 參考連結
🔽 屬性簡介
1. 作用于容器的屬性
2. 作用于元素的屬性
一、網格布局理念
1. 網格的形成
2. 網格布局的優勢
二、對容器劃分表格
0. 基本代碼
1. grid-template-column：對容器分列(劃分容器重要屬性)
1.1 使用像素(pixel)分列
1.2 使用百分比分列
1.3 分列機關3：fr
1.4 分列機關4：ch
1.5 自動填充：auto與寬度配置設定優先級
1.6 給列線命名
2. grid-template-rows：對容器分行(劃分容器重要屬性)
2.1 使用像素分行
2.2 使用百分比分行
2.3 使用fr分行
2.4 隐藏在分行中的auto
3. 函數minmax()
4. grid-auto-rows：配置設定預設行高
5. grid-auto-columns：配置設定預設列寬
6. 函數repeat()：重複分列/分行模式
7. grid-auto-flow：定義行擴充方向
三、合并單元格
2. 再談grid-auto-flow：容器的飽和填充
四、設定單元格之間的間隙
1. row-gap：單元格上下間隙
3. gap單元格間隙
五、設定元素在單元格内的對齊方式
1. align-items：單元格内垂直對齊方式
六、元素自定義在單元格中的對齊方式
1. align-self：元素自定義在單元格中的垂直對齊方式
2. justify-self：元素自定義在單元格内的水準對齊方式
七、設定行與列在容器中的水準與垂直對齊方式
1. align-content：設定各行垂直對齊方式
2. justify-content：設定各列水準對齊方式
八、容器區域命名
1. grid-template-areas：區域命名
2. grid-area：給元素指定區域名
grid布局就是表格布局(grid layout)，或者稱之為栅格布局也行。因為栅格布局的概念來自于bootstrap，這裡使用栅格布局來與bootstrap做關聯，是因為它倆是描述的同一個東西。自從有了CSS3原生表格布局，想象一下，以前用樣式架構在一行中添加很多屬性，無形中增加了幾倍代碼，grid布局就用幾行代碼就完成了架構很多配置才完成的功能，這是多美的一個進步。網格布局的屬性相當多，有很多一個屬性代表了另外兩個屬性的綜合體。
grid布局可以完全替代flex布局，但是得先熟練，熟練的前提是會用，用的前提是得了解網格布局是什麼。
🔽 參考連結
- grid布局指南
- css grid網絡布局教程
- css自動布局：flex
🔽 屬性簡介
1. 作用于容器的屬性
-
gird-template-areas
grid-area
-
grid-template-columns
-
grid-template-rows
-
grid-auto-columns
grid-template-columns
grid-template-rows
grid-column
-
grid-auto-rows
grid-template-columns
grid-template-rows
grid-auto-columns
-
grid-auto-flow
-
column-gap
-
row-gap
-
gap(舊名grid-gap)
column-gap
row-gap
row-gap
colum-gap
-
justify-items
-
align-items
-
place-items
-
justify-content
-
align-content
-
place-content
justify-content
align-content
-
grid-template
grid-template-rows
gird-template-columns
grid-template-areas
2. 作用于元素的屬性
-
grid-area
grid-template-areas
-
grid-column-star
-
grid-column-end
-
grid-column
grid-column-star
grid-column-end
grid-column-start
grid-column-end
/
gird-column-start / grid-column-end
-
grid-row-star
-
grid-row-end
-
grid-row
gird-row-start
grid-row-end
grid-row-start
grid-row-end
/
grid-row-start / grid-row-end
-
justify-self
justify-item
-
align-self
align-item
一、網格布局理念
1. 網格的形成
一個網格的形成，需要由一些列線和橫線互相之間垂直交錯，才能形成一個網格。在後文中這些列線和橫線都可以有各自的名字1，在規劃元素占用哪些範圍網格時，會使用到這些橫線和列線。
對于如何劃分區域，是按比例劃分列？還是按照每一個單元格劃分多少像素，還是按每個單元格容納多少字元計算？這都由開發者本人根據當時情況來決定，自由度是很不錯的。
2. 網格布局的優勢
傳統意義上，使用table标簽結合th tr td标簽，劃分出來的表格，時常難以維護，因為被劃分出來的表格都将是寫死了的，沒有靈活性可言。例如，我想要将原來
30 * 10
的網格，修改為
15 * 20
的表格特，要對原有的html标簽内容做不少的修改，是一個相當麻煩的事。有了grid布局，不再需要修改html，隻需要修改幾行樣式配置(css)，即可改變表格的結構，而不用像table标簽布局那樣，去修改大量的html标簽。更加值得注意的是，grid布局對标簽的依賴性不高，如果按照表格系列标簽來做網格布局的話，是做不到換行操作的，怎麼都需要借助js進行dom操作。但grid布局對元素換行行為，就不再依賴于js操作2，使用純css都可以實作以前基于架構才有的動态效果，是以這就是很香！
二、對容器劃分表格
本文需要通過執行個體示範具體樣式，是以要先貼出本文基礎代碼，在介紹樣式屬性時，再根據基礎代碼修改，以此避免讀者不了解的情況發生。在基本代碼中，對容器的樣式屬性中尤其要注意display設定，因為本文中所有的樣式，都是要根據這個display屬性是否取值gird或inline-gird。其中inline-grid表現容器在外部環境中是否使用行内樣式，也就是說，容器可以自定義自己在外部(父元素)環境中是否屬于行内元素。
0. 基本代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
}
[class^="item"] {
box-sizing: border-box;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: aquamarine;
color: white;
}
</style>
</head>
<body>
<div id="con">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
<div class="item7">item7</div>
<div class="item8">item8</div>
<div class="item9">item9</div>
<div class="item10">item10</div>
</div>
</body>
</html>
初始渲染樣式如下：
1. grid-template-column：對容器分列(劃分容器重要屬性)
對于表格布局，對區域的劃分，一定由列線和行線構成，這裡先介紹分列。grid-template-column的值是一個由空格分隔的值，每一個被空格分開的值都代表一列的列寬。在後文中也可以了解為占用容器總寬度的比列。
1.1 使用像素(pixel)分列
假設容器需要被設定成3列，第一列的寬度為200像素(pixel)，第二列和第三列要被劃分為100像素，那麼對grid-template-column的配置可以這麼寫：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 200px 100px 100px;
}
渲染樣式如下：
通過浏覽器開發者模式，可以知道在item1所在的列，單元格的寬度都是200像素，而item2和item3所在的，寬度都是100像素。因為在前文中說明，grid-template-columns中，每一個由空格分開的值，都代表一列的寬度，在這裡隻寫了三列寬度，那麼容器就隻被劃分了三列。這裡出現了自動換行，這是因為grid-auto-rows的緣故，在後文會有介紹。
1.2 使用百分比分列
如果使用像素位劃分列的話，那就等于将寬度固定了，如果容器寬度發生變化，那就會發生樣式錯位了，顯然不夠靈活。為了解決這個可能的錯誤，可以使用百分比來表示各列寬度。這裡得提醒一下，如果各列的百分比總和大于1的時候，那麼容器寬度怎麼調，裡面的元素都撐破容器跑到外面去，這個情況就不太好了。
是以在使用百分比的時候，一定要注意各列的百分比之和要小于等于1(100%)。
例如，我們要将一個容器分為4列，每一列占用容器的25%。css可以這樣寫：
#con {
background-color: bisque;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
渲染效果如下：
代碼解釋
：以上css配置中，grid-template-columns的值有四個，這代表容器被分為了4列。這四個值都是25%，這代表這四列寬度都是占容器寬度的25%。這樣，不論視窗怎樣變化，容器裡面的每一列，都會随着變化改變自身大小，那麼使用固定像素值作為列寬，可能出現問題就不存在啦。
1.3 分列機關3：fr
在使用百分比的時候，通常需要去計算百分比的值，例如，我要将第一列、第二列與第三列的比例劃分為1:2:3，且三列之和等于容器寬度。這個時候去計算百分比的值，就顯得非常麻煩，而且百分比值還不一定完美。是以，對列的劃分就引入了一個新的比例機關fr，将具體數值交給程式自動處理，省去了計算百分比的麻煩。
例如 grid-template-column:1fr 2fr 3fr;就表示：這個容器被分為三列，因為屬性值有三個個:1fr 2fr 3fr，第一列、第二列與第三列的比值為1:2:3。來看看示例吧：
css配置如下：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
配置效果渲染圖如下：
代碼解釋
：通過以上css樣式配置以及效果圖來看，id為con的容器，将其内部分為了三個列：他們的比例關系為1:2:3，且各列的寬度之和等于容器的寬度。
1.4 分列機關4：ch
這個單元用于表示分列時，一列的寬度以字元為機關進行分列，比如，grid-template-columns:2ch 3ch就表示，第一列2字元寬度，第二列3字元寬度，當然，所謂的字元寬度時以英文字元為機關的。
1.5 自動填充：auto與寬度配置設定優先級
在使用固定像素位、百分比都有可能會存在寬度有剩餘的情況。這個時候，如何如處理剩餘的寬度，或者怎樣精确的配置設定剩餘容器寬度，這個使用auto再合适不過了。
例如，我們要将一個盒子第一列配置設定30%的容器寬度，第三列配置設定100px(100像素)容器寬度，剩下的不管多少空間，統統給予第二列。這個時候因為使用的混合配置設定，使用百分比也不可能計算剩下寬度，使用固定值也無法滿足剩下寬度。是以使用auto配置設定剩餘空間最合适。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 30% auto 100px;
}
效果圖如下：
auto在grid-template-columns中等于一列的占位符。類似于1fr，但是差別于fr。在下文我将展示這個差別。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 30% 1fr auto;
}
渲染效果：
我在上文介紹的所有分列機關中，各個機關都可以混合使用，但總是在使用百分比和固定像素值的列滿足之後，再滿足auto列的基本寬度需求，最後再利用剩餘寬度給以fr為機關的列。
1.6 給列線命名
在上文已經通過示例如何對列寬配置設定，但是卻沒有說列線。隊列線的概念，我在文章開始的時候，就說明了它的存在，但是放到現在才說，是因為使用到列線，就需要涉及到容器的子項配置。需要配合對容器子項的屬性grid-column-start grid-column-end grid-column，在此時提及，不太合适。但還時來來簡單介紹一下。給列線命名還是使用grid-template-columns屬性。格式如下：[col-line-name] col-width [col-line-name] col-width [col-line-name] …
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: [col1] 30% [col2] 1fr [col3] auto [col4];
}
代碼解釋
：代碼中中括号中的内容就是列線名，col1就是對第一列左列線命名，col2就是對第一列右列線的命名，col2同時也是第二列的左列線名。因為通過浏覽器開發者模式也無法看出來，是以這裡就不再貼出效果圖了
2. grid-template-rows：對容器分行(劃分容器重要屬性)
grid-template-rows用于對容器的分行，分行屬性的使用方法和分列的方法是一樣的用法。
這裡值得注意的是，在上文分列的時候，并沒有給容器指定劃分多少行，但是容器為配置自動分行了。
按照現在既有代碼來分析的話。我在代碼中指定了每一行有3個元素，那麼按照表格布局的模式，我還要給容器劃分4行，才能算得上表格布局。
上文中，等于是容器自動檢測到内部具有10個元素，然後根據每一行3個元素，算出，至少需要4行，才能容納所有的元素，且每一行等比例的占滿容器高度——也就是說，4行平分容器高度，作為每一行的行高。
這就是容器的預設分行方式，其實預設的分行方式都還算不錯啦。但是，總有需要自定義分行的時候嘛。
2.1 使用像素分行
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px 100px 50px;
}
效果圖如下：
代碼解釋
：以上代碼表示，容器一共被分為4行，第一行、第二行、第四行都是50px(像素位)，第三行是100像素寬度。
2.2 使用百分比分行
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 25% 25% 10% 20%;
}
代碼解釋
：表示一共分為4行，第一二行為容器總高度的25%，第三行為容器總行高10%，第四行為容器總行高的20%。
2.3 使用fr分行
這裡就是使用等比占用，且各行的高度之和等于容器高度。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr 1fr;
}
代碼解釋
：以上配置中，第一行、第二行、第三行與第四行的之間的比例關系是：1:2:1:1，且他們總高度之和等于容器高度。
2.4 隐藏在分行中的auto
在上文分行中，每一類分行我都是分的四行。如果嘗試将
3*3
的網格劃分容器的話，結果可能會出乎意料，因為本身按照
3*4
劃分才能容得下所有元素，劃分到
3*3
容器中，将會有一個多餘的元素。請看執行個體：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
很顯然，分列時，同時使用fr與auto分列時，也有相似的情況。這裡分行時先是按照最低高度給auto列分高，然後利用剩下的高度給所有使用fr高度的行，按比例劃分剩下容器高度。
也就是說，不在容器規劃範圍内的行，容器預設給予其auto分行的方式，我們可以做一個示例來驗證一下，這和分列的遇到fr機關與auto混合使用的時時一樣的：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: [col1] 30% [col2] 1fr [col3] auto [col4];
grid-template-rows: 20% 100px 10% auto;
}
grid-template-columns按照空格劃分，每一個被空格隔開的值，都是代表一列的寬度或者占總寬度的比例;
同樣，grid-template-rows也一樣，每一個通過空格隔開的值，都代表一行的寬度或者占容器總高的比例
3. 函數minmax()
有關參考連結：css minmax()函數介紹
這個一個輔助函數，給容器中的一列或者一行劃分最小寬度和最大寬度或者最小高度和最大高度的，也就是說，當某一列或者某一行寬度不夠或者高度不夠時，某一列或某一行還能保持最低寬度或最低高度。使用這個函數，跟我們定義一行或者一列一樣，使用方式并沒有什麼不同。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: minmax(200px ,1fr) minmax(200px,1fr) 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
效果圖如下:
代碼解釋
：從上圖看起來，第一列和第二列的最小寬度都是200px，而他們的最大寬度時1fr，已經觸及到最小寬度了，是以第一列和第二列不會縮小，相反，第三列因為沒有最小寬度限制，已經被壓縮啦。
換一種角度來思考：
現在css樣式時這樣的：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: minmax(100px ,1fr) minmax(100px,1fr) 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
效果圖如下：
上圖看起來和grid-template-columns:1fr 1fr 1fr;沒有什麼差別，原因在于每一列的最大寬度，就是各列平分容器寬度的樣子。
但是當容器變小時，就會有變化啦，例如，容器縮小到240px時，因為容器的縮小，如果按原來平均分的話，每一列都隻有80px，是以不滿足一二列的最低100px，是以就會優先滿足有最低寬度為100px的一二列，沒有底線的第三列，就沒法了，必須做出讓步。是以當容器縮小時，就會先滿足前兩列的最低需求，然後縮減第三列，以達到配置要求。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 260px;
height: 400px;
display: grid;
grid-template-columns: minmax(100px ,1fr) minmax(100px,1fr) 1fr ;
grid-template-rows: 20% 100px 10% ;
}
效果圖如下。
除了列以外，分行時的對行高的限制也可以使用這個函數。這裡就不再做示範了。
4. grid-auto-rows：配置設定預設行高
使用這個屬性的時機，在對容器的網格劃分無法容納所有元素時，元素預設會向下擴充，此時，擴充的行行高因該是多少，就由這個屬性決定。
例如，在本文代碼中，我在容器内規定了十個元素，如果我在劃分容器的時候，隻給予3*3寬度，按照上面的邏輯，第十個元素會向下擴充一行，這時，如何規定第四行的高度，這個(grid-auto-rows)屬性就排上了用場。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px; /* 注意這裡被修改回500像素了 */
height: 400px;
display: grid;
grid-template-columns: minmax(100px ,1fr) minmax(100px,1fr) 1fr ;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-rows: 1fr
}
渲染結果圖
代碼解釋：以上css配置，同沒有配置樣式屬性grid-template的網格渲染樣式一緻。說明一件事，grid-auto-rows預設值是等于1fr的，這樣才能達到同樣的效果，在以上css配置中取消grid-template-rows，你将看到一摸一樣的效果。
5. grid-auto-columns：配置設定預設列寬
這個屬性是在配置設定的列不夠時，給予超出的列一個預設的寬度。當然，正常情況下，列數不夠的時候，元素預設會向下排列，根本不可能存在列數不夠的情況。對于這個屬性的使用需要結合用于子選項上的grid-column-start、grid-column-end或grid-column才行，在後文介紹這三個屬性的時候，在來介紹這個屬性。
6. 函數repeat()：重複分列/分行模式
在上面的代碼中，不知道讀者有沒有一點點想法，如果容器或者螢幕足夠大，我要劃分的網格比較多，但是表格又都是同等大小的，這個時候要寫不少對列或行一樣的定義，比如我要寫10 * 10的表格，那不得寫20個1fr嗎？這個時候就可以用css函數repeat撿個懶。
例如要劃分10列等比的網格列。那麼我就給grid-template-columns屬性的值使用，repeat函數代替。隻需要将repeat函數的第一個參數傳入10，第二個參數傳入1fr。第一個參數代表重複次數，第二個參數就是要重複的樣闆。
基于本文的代碼，我在這裡給容器劃分4列3行的表格：
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(3,1fr);
}
代碼解釋：根據以上css渲染圖以及配置。可以知道repeat參數中第一個參數就是代表需要重複模式，而第二個也許還不能夠說明什麼是重複模式，或者叫模闆。
我這裡舉個例子：我要對容器列重複一種模式填充滿容器，例如，開始的第一列是100像素，緊接着第二列為1fr，然後緊接着第三列是2fr。再後面就是重複第一列的100像素，然後重複1fr，然後重複2fr。這樣一共就劃分了6列。但可以看出規律來，也就是對列的劃分按照100px 1fr 2fr重複兩次，是以像100px 1fr 2fr 這樣就可以稱之為模式，或者叫模闆。使用repeat函數表達如下。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(2,100px 1fr 2fr);
}
代碼解釋：通過以上代碼，以及顯示效果來看，名稱為1的列線到名稱為4的列線之間于4号列線到7好列線之間的模式就是一樣的：100px 1fr 2fr，他們都重複了2次。不過這裡顯示很像100px 50px 100ox的格式，是因為在給容器配置設定表格的時候，一般會優先滿足使用固定像素位和使用百分比列或行。将剩下寬度或者高度，按照比例關系配置設定給使用fr為機關的列或行。是以根據這個原則計算上面的渲染圖。就是500寬度-200被占用的固定寬度。給予以fr為機關的列，那麼他們比例關系為1:2:1:2，共6份，每一份50就是50像素，是以每一個模式中占用1fr的列實際寬度為50px，占用2fr的寬度為100px。是以我們在渲染圖中可以見到，同一模式中的第一列和第三列是一樣的寬度。
💠 repeat與響應式
有關參考連結：css repeat函數詳細介紹
repeat第一個參數除了是數字以外，還可以是auto-fill、auto-fit，結合minmax()函數使用，可以發揮更加強大的布局樣式。
7. grid-auto-flow：定義行擴充方向
預設情況下，容器使用網格布局的時候，其内部的元素預設的排列方向，總是先從左往右，再自上而下排列元素。但還可以規定先自上而下，再自左向右排列。總的來說grid布局，就隻有這兩種布局方式了，比不上flex布局有
2 * 4
種排列方式。這裡簡單介紹一下該樣式屬性即可。
#con{
background-color: bisque;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: column;
}
代碼解釋：可以看到，使用grid-auto-flow先滿足自上而下的列排列好，再向右擴充列。
這個屬性除了能改變行的擴充方向以外，還可以有其他的作用，這個将在後文，介紹于子元素屬性的時候再做介紹。
三、合并單元格
合并單元格是個特殊操作，當對容器不滿足于網格形式布局形式的時候，例如，要一個容器單元格占兩格單元格的時候。就需要使用到單元格合并，以滿足對容器網格的特殊劃分，例如我要在頭部使用四個單元格劃為一行，用來當作論壇的頭部一級菜單。我要在最左邊劃分一列，共占用3行作為網站的二級菜單。其他部分作為網站内容主體，就如下圖所示的區域劃分，使用grid布局就很容易實作，事實上，該圖例也是使用grid來實作的。
其剖析圖如下：
如果要使用單元格合并，那麼必須要規定子單元格如何合并，從什麼位置到什麼位置合并為目前單元格。是以本質上，本節介紹的屬性是寫在子元素上的，由子元素來決定，自己如何占用容器所劃分的單元格。
在grid布局中，對單元格的合并，需要使用到分隔線，包括分隔行的行線，分隔列的列線，都是分隔線。在指定合并哪些單元格時，就是在指定哪兩個分隔線之間的範圍——或者說元素想占用哪個分割線到哪個分割線之間的範圍。
因為下文中，使用不到太多的單元格，是以新的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
[class^="item"] {
box-sizing: border-box;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: aquamarine;
color: white;
}
.item1 {
background-color: teal;
}
.item2 {
background-color: tomato;
}
</style>
</head>
<body>
<div id="con">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>
</body>
</html>
初始渲染樣式如下：
1. grid-column-start、grid-column-end與grid-column合并列
grid-column-start代表要某元素要占用列線的起點列線索引。而grid-column-end表示元素要占用範圍的結束列線索引。例如，我要第一個元素，占用容器的第二根列線到最後一根列線之間的範圍。是以，class為item1的元素樣式如下：
.item1{
background-color: teal;
grid-column-start: 2;
grid-column-end: 5;
}
代碼解釋
：如上圖所示，使用css将第一個元素将第二根列線，到第五根列線之間的範圍成功合并，但是分割線索引如何知道呢？
解析圖如下，每一個箭頭直線的都是一根分割線，箭頭上的數字就是分隔線的索引(取自Firefox浏覽器開發者模式)
place-column是grid-column-start與grid-column-end複合屬性，該屬性可以使個格式:
開始列線索引/結束列線索引
，表示合并的區域範圍。例如下列css配置将于上圖一緻：
.item1{
background-color: teal;
/* grid-column-start: 2;
grid-column-end: 5; */
grid-column: 2/5;
}
2. 再談grid-auto-flow：容器的飽和填充
通過以上樣式，可能你已經發現了，那第一個單元格空了，這應該怎麼解決。這種發生單元格空缺的情況，隻有再合并單元格才會出現。也就是按照正常文檔流排列順序時，當剩下的空餘不足以後面一個元素時(此處描述有誤)，那麼如何安排剩餘空間，使容器能夠填滿。這個時候要使用grid-auto-flow的第二類值：dense，表示容器的填充方式是否飽和填充。當然這個屬性也可以有兩個值，但是要用空格分開。例如使用這個屬性規定排列優先滿足列填充，然後還要飽和填充。總之，你隻需要記住grid-auto-flow可以設定排列方式和飽和時填充容器這兩個功能就好了。
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: dense;
}
3. grid-row-start、grid-row-end與grid-row：合并行
grid-row-start代表要合并範圍的起始行分割線索引，grid-row-end表示合并範圍的結束行線索引，例如，我要将第二個元素合并到第三行。那麼就是說class等于item2的元素，要将第一根行線，到第四根行線之間的範圍合并為一個區域，可以這麼寫(對容器grid-auto-flow樣式有修改)
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: dense;
}
/*中間省略*/
.item2{
background-color: tomato;
grid-row-start: 1;
grid-row-end:4;
}
place-row是grid-row-start與grid-row-row-end的複合屬性，使用格式:
開始行線索引/結束行線索引
，下列css将與上圖渲染圖一緻。
.item2{
background-color: tomato;
/* grid-row-start: 1;
grid-row-end: 4; */
grid-row: 1/4;
}
四、設定單元格之間的間隙
設定單元格間隙可能會使用到三個屬性:row-gap、column-gap與gap。這三個屬性用于設定單元格之間的間隙距離。不過row-gap值針對于行之間的間隙，而column-gap是針對于列之間的間隙。而gap是row-gap與column-gap的複合屬性。
1. row-gap：單元格上下間隙
row-gap用于設定單元格上下之間的間隙，注意，是單元格之間，并不包括單元格與容器之間，是以我在容器内取消padding的值，以表現出來。
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: dense;
row-gap: 1rem;
}
2. column-gap:單元格左右間隙
這個屬性用于設定單元格左右之間的間隙，注意，是單元格之間。
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: dense;
row-gap: 1rem;
column-gap: 2rem;
}
渲染圖
透視圖
以上代碼中，我添加了對列之間的間隔配置，列之間為2rem，見渲染圖可知。
3. gap單元格間隙
如果在樣式中，需要同時對行之間與列之間的單元格間隙做設定，那麼隻需要gap一個屬性就好了。gap的值是由空格分隔的兩個值構成的，第一個值，也就是空格前面的那個值，代表行之間的間隔，第二個值代表列之間的間隔。下面這樣的css配置将與上面的渲染圖一摸一樣。
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
padding: 1rem;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(4,1fr);
grid-auto-flow: dense;
/* row-gap: 1rem;
column-gap: 2rem; */
gap:1rem 2rem
}
五、設定元素在單元格内的對齊方式
劃分的區域内，元素應該如何在單元格内對齊，可能需要的屬性：align-items、justify-items或place-items。新的樣式及html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
[class^="item"] {
box-sizing: border-box;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: aquamarine;
color: white;
}
</style>
</head>
<body>
<div id="con">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>
</body>
</html>
1. align-items：單元格内垂直對齊方式
我要将容器内所有的單元格内容直居中對齊，可以這麼配置：
align-item:center
：
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
align-items: center;
}
解析圖
2. justify-items：單元格内水準對齊方式
設定容器内所有單元格内容的水準對齊方式，使用justify-items。例如我要将單元格的内容，再水準方向上右對齊，可以這麼寫:
justify-items:end
：
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
align-items: center;
justify-items: end;
}
透視圖
3. place-items：align-items與justify-items複合屬性
而使用place-item可以同時設定單元格内的元素垂直和水品對齊方式，它的值由空格分開的參數構成，空格前面的代表垂直對齊方式，空格後面的代表水準對齊方式，以下css配置将和上圖一緻：
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
/* align-items: center;
justify-items: end; */
place-items: center end;
}
六、元素自定義在單元格中的對齊方式
在上一節介紹了，對容器内所有單元格内容的對齊方式以後，總會有些情況需要對單元格内容的特殊設定。因為是自身要脫離容器的全局樣式，那麼，要自定義的話就是元素要配置，這麼一來，就需要元素自身設定一個樣式屬性來覆寫父元素設定的全局樣式。
1. align-self：元素自定義在單元格中的垂直對齊方式
假設第一個元素在容器内要垂直向下對齊，那麼css可以這麼配置：
.item1{align-self: end;}
如渲染圖所示，第一個元素的垂直方式已經脫離了全局設定，變為向下對齊了。
2. justify-self：元素自定義在單元格内的水準對齊方式
這裡同樣對第一個元素設定，假設将它水準位置設定為左對齊，可以這麼寫：
.item1{align-self: end;justify-self: start;}
如渲染圖所示，第一個元素已經左對齊了
七、設定行與列在容器中的水準與垂直對齊方式
要對列或行的對齊方式進行配置的時候，那麼在容器寬度或者高度上必須要空間剩餘，否則誰知道各列或各行時怎樣水準對齊或垂直對齊的呢？
換一個角度思考，能展現行或列對齊的場景時，容器在行或列上必須有空隙，如果有空隙，那麼在對容器進行劃分行或列時，就不包括使用了彈性機關 fr 或 auto，因為有了這些機關，容器就不存在剩餘空間。
為了展示對各行和各列的對齊效果，新添加了三個元素，共九個子元素。網格修改為3x3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 90px);
}
[class^="item"] {
box-sizing: border-box;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: aquamarine;
color: white;
}
</style>
</head>
<body>
<div id="con">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
<div class="item7">item7</div>
<div class="item8">item8</div>
<div class="item9">item9</div>
</div>
</body>
</html>
1. align-content：設定各行垂直對齊方式
align-content表示對各行在垂直方向上的對齊方式。那麼，要設定各行再垂直對齊方式為上下兩端對齊，可以這麼設定：
align-content:space-between
:
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,90px);
align-content: space-between;
}
渲染效果
渲染圖中，被畫上了斜杆的區域，都是在行垂直方向上的兩端對齊後，剩下的高度，将被平均分散于各行之間的間隙，剩餘高度被平均分散于行間隙之後，看起來就是各行之間的間隙相等。
2. justify-content：設定各列水準對齊方式
justify-content用于設定各列在水準方向上的對齊方式。例如，我要各列在水準方向上右對齊，可以這寫:
justify-content:end
:
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,90px);
align-content: space-between;
justify-content: end;
}
3、place-content：align-contentu與justify-content的複合屬性
place-content是align-content與justify-content的綜合屬性，其值有兩個，由空格分開。空格前面的(第一個值)，表示各行在垂直方向上的對齊方式，空格後面的值(第二個值)，表示各列在水準方向上的對齊方式。
例如下來css配置方式就于上圖的渲染結果一緻：
#con{
border: 2px solid blue;
margin:100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: repeat(4,3rem);
/* align-content: space-between;
justify-content: end; */
place-content: space-between end;
}
八、容器區域命名
之是以将這種劃分表格的方式，放到最後介紹，是因為這種劃分表格的方式，在分隔線劃分容器網格體系之外的，它是完全不一樣的區域劃分方式，且個人認為不太容易解釋，放到最後，也是因讀者而異吧，也許會有讀者會認為這種劃分方式更容易了解呢？
由于這種劃分單元格的特殊性，現貼出如下基礎代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
}
[class^="item"] {
box-sizing: border-box;
background-color: blueviolet;
display: flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-style: solid;
border-color: aquamarine;
color: white;
}
</style>
</head>
<body>
<div id="con">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>
</body>
</html>
基礎代碼渲染圖
1. grid-template-areas：區域命名
這個屬性的值是由一對雙引号引起來的值表示一行屬性，引号中使用空格分開的名稱，每一個名稱都代表一個單元格。這種劃分區域的方式沒有使用grid-template-columns與grid-template-rows靈活，适用于布局相對固定的頁面。
同時每一對引号中，由空格分開的值數量都相同，因為每一對雙引号都表示一行，不可能一行有3個單元格，而另一行卻有2個單元格吧？如果真是這樣，就沒法劃分網格了。
例如，我要劃分3x3規格的網格。可以這麼寫：
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-areas:
"a b c"
"d e f"
"g h i";
place-items: top center;
}
渲染圖如下：
以上結果中，item1所在的單元格名稱為
a
，item2所在單元格名稱為
b
，item3所在單元格名稱為
c
，item4所在單元格名稱為
d
，item5所在單元格名稱為
e
。解析圖如下：單元格中對應的字母，就是目前單元格的名稱。
如果要一個單元格隻是占位，但是不想給他取任何名字，就把相應單元格的位置設定成一個小數點
.
，如下：
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-areas:
"a b ."
"d e f"
"g h i";
place-items: top center;
}
解析圖：
如上圖所示，c區域已經沒有了
2. grid-area：給元素指定區域名
這個屬性是用于屬性上的，不是用于容器上的，該屬性通過grid-template-areas結合起來，可以實作排序單元格合并功能，它倆的組合可以說非常智能，以至于我現在還無法從原理上解釋這種布局模式。這個是css3的強大之處吧，意識到自己實在學識不足，不足以解釋這個方式。
給元素指定使用哪個區域後，元素的位置就會到指定的區域中去。例如，我要item1的元素到
h
區域，對item1的配置可以這樣：
.item1{grid-area: h;}
渲染圖如下：
例如我要e和h統一合并為
h
區域，那麼可以這麼設定：
#con {
border: 2px solid blue;
margin: 100px auto 0px;
width: 500px;
height: 400px;
display: grid;
grid-template-areas:
"a b ."
"d h f"
"g h i";
/* 注意這裡我将第二排的e區域改為了h區域 */
place-items: top center;
}
[class^="item"] {
box-sizing: border-box;
background-color: bisque;
text-align: center;
}
.item1 {
grid-area: h;
background-color: teal;
/* 給h區域加上背景顔色 */
}
渲染圖如下：
代碼解釋
:因為e和h區域統一為h區域以後，又因為item1使用的h區域，是以，我提前将h區域設定了不一樣的顔色。這樣item1元素就合并了兩個單元格。
這個元素最大好處就是不用寫使用分割線的方式合并區域了，同時具備了使用分隔線不具備的排序功能，這點是非常好的，同時它具有的智能程度也更高。
👉🏻 事實上，在我接觸代碼中，grid布局很少用到列線命名，因為列線就隻用來劃分元素占用單元格的範圍 ↩︎
👉🏻 flex布局對元素換行也不用依賴于js，這也是使用css實作的 ↩︎
本文源自：grid layout(網格布局、栅格布局、grid布局)：bootstrap，請到曆史書報道！