摘要：簡單點說，就是由單元格慢慢過渡到具有合并單元格的布局在腦海中想想曾經(jīng)愛過的?；诰W(wǎng)格線使用關(guān)鍵詞實現(xiàn)單元格合并在布局中除了使用網(wǎng)格線合并單元格之外，還可以使用關(guān)鍵詞來實現(xiàn)單元格合并。

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

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

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

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

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

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

從示圖中不難發(fā)現(xiàn):

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

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

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

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

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

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

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

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

效果如下：

在線案例

從效果圖中，不難發(fā)現(xiàn)，雖然在B區(qū)通過網(wǎng)格線定義了跨行：

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

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

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

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

實現(xiàn)的效果一樣：

在線案例

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

在網(wǎng)格定義網(wǎng)格線的方式如下：

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

寫個實例，通過自定義的網(wǎng)格線實現(xiàn)上例一樣的網(wǎng)格布局效果：

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

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

在線案例

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

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

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

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

效果如下：

在線案例

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

使用repeat的代碼如下：

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

你將看到效果：

在線案例

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

在上一節(jié)中，介紹了網(wǎng)格區(qū)域制作單元格，其實根據(jù)網(wǎng)格區(qū)域的定義，也可以使用網(wǎng)格區(qū)域?qū)崿F(xiàn)單元格的效果?；氐轿恼碌谝粋€示例，使用網(wǎng)格區(qū)域，只需要這樣寫，就可以輕松實現(xiàn)所需要的效果：

.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中合并行并沒有像合并列來得那么簡單。換句話說，要實現(xiàn)下圖的效果，到目前為止僅使用CSS Grid Layout的網(wǎng)格線或者網(wǎng)格區(qū)域是無法實現(xiàn)的。

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

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

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

在線案例

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

via w3cplus