摘要：簡單點說，就是由單元格慢慢過渡到具有合并單元格的布局在腦海中想想曾經愛過的。基于網格線使用關鍵詞實現單元格合并在布局中除了使用網格線合并單元格之外，還可以使用關鍵詞來實現單元格合并。

《CSS Grid布局：網格單元格布局》一文中通過一些簡單的實例介紹了如何給容器定義網格，并且怎么使用網格線或者網格區域來實現單元格這樣的簡單的布局。在文章結尾之處也提到過，這樣的單元格如同表格一樣，僅僅一個個獨立的單元格是無法滿足一些復雜的Web布局，我們需要將多個單元格合并在一起，拼裝成一個稍為復雜一點的布局。簡單點說，就是由單元格慢慢過渡到具有合并單元格的布局（在腦海中想想曾經愛過的table）。

那么接下來我們要介紹的是如何使用CSS Grid Layout實現一些更有意思的布局。

在腦海中有很多種布局效果，那我們先來看一種常見的，簡單的布局模板，如下圖所示：

上圖也是這一章需要實現的一種布局方式，就將其稱為網格的合并單元格布局，因為他和表格中的合并單元格是非常的相似。

大家是否還記得，在《CSS Grid布局：網格單元格布局》一文中通過網格線的grid-column-start、grid-column-end、grid-row-start和grid-row-end（或者grid-column: start / end和grid-row: start / end）可以非常方便的實現單元格的布局，那么這種方式同樣可以運用于合并的單元格布局中。如此一來，如果我們需要實現上圖展示的布局，就可以給每個子元素設置網格線，然后劃分出各自的占位區。來看看其對應的網格線：

有了這樣的示意圖，我想要實現這個布局對于大家來說并不是一件復雜的事情。接下來我們通過實例來演示。

從示圖中不難發現:

A區（.a）跨越了三列和兩個列間距，對應網格布局中，他占了五個網格，從網格線上來劃分，他是列網格線line1、line6和行網格線line1、line2圈起的空間

C、D、E、G和H幾個區與以前介紹的單元格并無不同之處，對于的網格線可以看上面的網格線展示示意圖

F區（.f）跨越了兩列和一個列間距，對應網格布局中，他占了三個網格，從網格線上來劃分，他是列網格線line1、line4和行網格線line5、line6圈起的空間

I區(.i)和F區類似，只不過他是列網格線line3、line6和行網格線line7、line8圈起的空間

J區(.j)和A區類似，只不過他是列網格線line1、line6和行網格線line9、line10圈起的空間

B區(.b)和前面幾個區都有點不一樣，他是將行合并在一起，跨越了網格中所有的行，從網格線上來劃分，他是列網格線line7、line8和行網格線line1、line10圈起的空間

從外觀上看，這跟平時看到的兩列布局非常的相似。不同之處是這里通過網格來實現。來看看具體代碼：

HTML

  
A
  
B
  
C
  
D
  
E
  
F
  
G
  
H
  
I
  
J

CSS

body {
  padding: 50px;
}
.wrapper {
  display: grid;
  grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
  grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
}
.box {
  background-color: #444;
  color: #fff;
  font-size: 150%;
  padding: 20px;
  text-align: center;
}
.a{
  grid-column: 1 / 6; 
  grid-row: 1 / 2;
}
.b {
  grid-column: 7 / 8; 
  grid-row: 1 / 10; 
  background: orange;
}
.c { 
  grid-column: 1 / 2; 
  grid-row: 3 / 4;
}
.d { 
  grid-column: 3 / 4; 
  grid-row: 3 / 4;
}
.e { 
  grid-column: 5 / 6; 
  grid-row: 3 / 4;
}
.f { 
  grid-column: 1 / 4; 
  grid-row: 5 / 6;
}
.g {
  grid-column: 5 / 6; 
  grid-row: 5 / 6;
}
.h {
  grid-column: 1 / 2; 
  grid-row: 7 / 8;
}
.i {
  grid-column: 3 / 6; 
  grid-row: 7 / 8;
}
.j {
  grid-column: 1 / 6; 
  grid-row: 9 / 10;
}

效果如下：

在線案例

從效果圖中，不難發現，雖然在B區通過網格線定義了跨行：

.b {
  grid-column: 7 / 8; 
  grid-row: 1 / 10; 
  background: orange;
}

但瀏覽器實際解析并不是跟我們想象的一樣。為什么跨行沒有效果呢？具體是什么原因，說實在的，我也不知道，或許有一天會更正這個問題。那么有沒有方法能解決呢？我們先繼續往下看吧。或許你能找到你需要的答案。

在CSS Grid Layout布局中除了使用網格線合并單元格之外，還可以使用關鍵詞span來實現單元格合并。接下來的實例，將使用span關建詞完成上例一樣的效果。

.wrapper {
  display: grid;
  grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
  grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
}
.a{
  grid-column: 1 / span 5; 
  grid-row: 1;
}
.b {
  grid-column: 7; 
  grid-row: 1 / span 9; 
  background: orange;
}
.c { 
  grid-column: 1; 
  grid-row: 3;
}
.d { 
  grid-column: 3; 
  grid-row: 3;
}
.e { 
  grid-column: 5; 
  grid-row: 3;
}
.f { 
  grid-column: 1 / span 3; 
  grid-row: 5;
}
.g {
  grid-column: 5; 
  grid-row: 5;
}
.h {
  grid-column: 1; 
  grid-row: 7;
}
.i {
  grid-column: 3 / span 3; 
  grid-row: 7;
}
.j {
  grid-column: 1 / span 5; 
  grid-row: 9;
}

實現的效果一樣：

在線案例

前面的示例，都是使用默認的網格線名稱來制作網格布局，其實在CSS Grid Layout模塊中還提供了自定義網格線名稱，然后使用定義好的名稱來制作網格布局。在CSS Grid Layout自定義網格線名稱都放置在()內。比如在下面的示例中，定義了列第一網格線名稱為col1-start(對應的列網格線line1)，然后后面緊跟第一列的軌道寬度100px，然后就是第一列后面的網格線col1-end(對應的列網格線line2)。行網格線也是類似。如下圖所示：

在網格定義網格線的方式如下：

.wrapper {
  display: grid;
  grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end) 10px (col4-start) 100px (col4-end);
  grid-template-rows: (row1-start) auto (row1-end) 10px (row2-start) auto (row2-end) 10px (row3-start) auto (row3-end) 10px (row4-start) auto (row4-end) 10px (row5-start) auto (row5-end);
}

寫個實例，通過自定義的網格線實現上例一樣的網格布局效果：

.wrapper {
  display: grid;
  grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end) 10px (col4-start) 100px (col4-end);
  grid-template-rows: (row1-start) auto (row1-end) 10px (row2-start) auto (row2-end) 10px (row3-start) auto (row3-end) 10px (row4-start) auto (row4-end) 10px (row5-start) auto (row5-end);
}
.a{
  grid-column: col1-start / col3-end; 
  grid-row: row1-start;
}
.b {
  grid-column: col4-start / col4-end; 
  grid-row: row1-start / row5-end; 
  background: orange;
}
.c { 
  grid-column: col1-start; 
  grid-row: row2-start;
}
.d { 
  grid-column: col2-start; 
  grid-row: row2-start;
}
.e { 
  grid-column: col3-start; 
  grid-row: row2-start;
}
.f { 
  grid-column: col1-start / col2-end; 
  grid-row: row3-start;
}
.g {
  grid-column: col3-start; 
  grid-row: row3-start;
}
.h {
  grid-column: col1-start; 
  grid-row: row4-start;
}
.i {
  grid-column: col2-start / col3-end; 
  grid-row: row4-start;
}
.j {
  grid-column: col1-start / col3-end; 
  grid-row: row5-start;
}

效果和預期的一樣，可以打示演示案例查看效果。

在線案例

上面那種自定義網各線的方法好是好，但也有一個問題，如果網格線少，還是蠻方便的，不過網格一多，網格線也多起來，每條網格線都定義名稱是不是太費時費力了。其實在CSS Grid Layout中不需要這么做，你完全可以給網格線定義相同的名稱，然后使用關鍵詞span添加到特定的目標網格線。這種方法對于創建一些復雜的網格（包括多個網格與列間距）是非常方便的。

在實際使用中，可以在網格內容軌道前的網格線都定義為col，而在列間距軌道前的網格線都定義為gutter。在調用時，可以使用col 來指定開始的網格線，配合關鍵詞span 來指寫網格的跨度。這樣說或許有些搞不明白，我們來看一個簡單的示例，比如說我們要實現下圖網格效果：

看看代碼要怎么寫，才能完成上圖的網格效果：

.wrapper {
  display: grid;
  grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter); 
  grid-template-rows: (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto;
}

.a{
  grid-column: col / span gutter 2; 
  grid-row: row;
}
.b {
  grid-column: col 3 / span gutter 2; 
  grid-row: row;
}
.c { 
  grid-column: col 5 / span gutter 2; 
  grid-row: row;
}
.d { 
  grid-column: col / span gutter 3; 
  grid-row: row 2;
}
.e { 
  grid-column: col 4 / span gutter 3; 
  grid-row: row 2;
}
.f { 
  grid-column: col / span gutter 2; 
  grid-row: row 3;
}
.g {
  grid-column: col 3 / span gutter 1; 
  grid-row: row 3;
}
.h {
  grid-column: col 4 / span gutter 2; 
  grid-row: row 3;
}
.i {
  grid-column: col 6 / span gutter 1; 
  grid-row: row 3;
}
.j {
  grid-column: col  / span gutter 6; 
  grid-row: row 4;
}

效果如下：

在線案例

在上例中，不難發現列和行都有很多重復的，比如：列網格線有六個(col) 100px (gutter) 10px，而行網格線有四個(row) auto (gutter) 10px。其實在CSS Grid Layout沒有必要這么痛苦，他提供了一個關鍵repeat，完全可以使用repeat來讓你的代碼變得更簡潔。

使用repeat的代碼如下：

.wrapper {
  display: grid;
  grid-template-columns:repeat(6, (col) 100px (gutter) 10px); 
  grid-template-rows: repeat(4, (row) auto (gutter) 10px );
}

你將看到效果：

在線案例

是不是一模一樣呀。是不是變得輕松多了。

在上一節中，介紹了網格區域制作單元格，其實根據網格區域的定義，也可以使用網格區域實現單元格的效果。回到文章第一個示例，使用網格區域，只需要這樣寫，就可以輕松實現所需要的效果：

.wrapper {
  display: grid;
  display: grid;
    grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
    grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
}
.a{
  grid-area: 1 / 1 / 2 / 6;
}
.b {
  grid-area: 1 / 7 / 10 / 8;
  background: orange;
}
.c { 
  grid-area: 3 / 1 / 4 / 2; 
}
.d { 
  grid-area: 3 / 3 / 4 / 4;
}
.e { 
  grid-area: 3 / 5 / 4 / 6;
}
.f { 
  grid-area: 5 / 1 / 6 / 4;
}
.g {
  grid-area: 5 / 5 / 6 / 6;
}
.h {
  grid-area: 7 / 1 / 8 / 2;
}
.i {
  grid-area: 7 / 3 / 8 / 6;
}
.j {
  grid-area: 9 / 1 / 8 / 6;
}

效果如下：

在線案例

從上面演示的眾多示例可以得知，在CSS Grid Layout中合并行并沒有像合并列來得那么簡單。換句話說，要實現下圖的效果，到目前為止僅使用CSS Grid Layout的網格線或者網格區域是無法實現的。

或許大家會說，拋開瀏覽器的兼容性問題，如果我真要實現上圖的布局風格，怎么破呢？我嘗試了一下，如果需要強制實現上圖效果，可以在.b容器中添加一段代碼：

.b {
  grid-area: 1 / 7 / 10 / 8;
  background: orange;
  height: 100%;
  box-sizing:border-box;
}

如果就模擬出上圖需要的效果。

在線案例

單元格的合并對于實現一個復雜的網格布局是不可或缺的，那么這篇文章主要向大家介紹了如何使用網格線制作網格的合并效果。實現方法有很多種，可以用網格線來劃分，也可以使用關鍵詞span來跨列，當然還可以使用repeat來減少網格線定義的重復工作。除了網格線之外，還可以使用網格區域來實現合并單元格的效果。不知道你掌握了幾種方法呢？

via w3cplus