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

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

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

在腦海中有很多種布局效果，那我們先來(lái)看一種常見(jiàn)的，簡(jiǎn)單的布局模板，如下圖所示：

上圖也是這一章需要實(shí)現(xiàn)的一種布局方式，就將其稱為網(wǎng)格的合并單元格布局，因?yàn)樗捅砀裰械暮喜卧袷欠浅５南嗨啤?/p>

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

有了這樣的示意圖，我想要實(shí)現(xiàn)這個(gè)布局對(duì)于大家來(lái)說(shuō)并不是一件復(fù)雜的事情。接下來(lái)我們通過(guò)實(shí)例來(lái)演示。

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

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

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

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

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

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

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

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

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ū)通過(guò)網(wǎng)格線定義了跨行：

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

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

在CSS Grid Layout布局中除了使用網(wǎng)格線合并單元格之外，還可以使用關(guān)鍵詞span來(lái)實(shí)現(xiàn)單元格合并。接下來(lái)的實(shí)例，將使用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;
}

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

在線案例

前面的示例，都是使用默認(rèn)的網(wǎng)格線名稱來(lái)制作網(wǎng)格布局，其實(shí)在CSS Grid Layout模塊中還提供了自定義網(wǎng)格線名稱，然后使用定義好的名稱來(lái)制作網(wǎng)格布局。在CSS Grid Layout自定義網(wǎng)格線名稱都放置在()內(nèi)。比如在下面的示例中，定義了列第一網(wǎng)格線名稱為col1-start(對(duì)應(yīng)的列網(wǎng)格線line1)，然后后面緊跟第一列的軌道寬度100px，然后就是第一列后面的網(wǎng)格線col1-end(對(duì)應(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);
}

寫(xiě)個(gè)實(shí)例，通過(guò)自定義的網(wǎng)格線實(shí)現(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)各線的方法好是好，但也有一個(gè)問(wèn)題，如果網(wǎng)格線少，還是蠻方便的，不過(guò)網(wǎng)格一多，網(wǎng)格線也多起來(lái)，每條網(wǎng)格線都定義名稱是不是太費(fèi)時(shí)費(fèi)力了。其實(shí)在CSS Grid Layout中不需要這么做，你完全可以給網(wǎng)格線定義相同的名稱，然后使用關(guān)鍵詞span添加到特定的目標(biāo)網(wǎng)格線。這種方法對(duì)于創(chuàng)建一些復(fù)雜的網(wǎng)格（包括多個(gè)網(wǎng)格與列間距）是非常方便的。

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

看看代碼要怎么寫(xiě)，才能完成上圖的網(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)格線有六個(gè)(col) 100px (gutter) 10px，而行網(wǎng)格線有四個(gè)(row) auto (gutter) 10px。其實(shí)在CSS Grid Layout沒(méi)有必要這么痛苦，他提供了一個(gè)關(guān)鍵repeat，完全可以使用repeat來(lái)讓你的代碼變得更簡(jiǎn)潔。

使用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ū)域制作單元格，其實(shí)根據(jù)網(wǎng)格區(qū)域的定義，也可以使用網(wǎng)格區(qū)域?qū)崿F(xiàn)單元格的效果?；氐轿恼碌谝粋€(gè)示例，使用網(wǎng)格區(qū)域，只需要這樣寫(xiě)，就可以輕松實(shí)現(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中合并行并沒(méi)有像合并列來(lái)得那么簡(jiǎn)單。換句話說(shuō)，要實(shí)現(xiàn)下圖的效果，到目前為止僅使用CSS Grid Layout的網(wǎng)格線或者網(wǎng)格區(qū)域是無(wú)法實(shí)現(xiàn)的。

或許大家會(huì)說(shuō)，拋開(kāi)瀏覽器的兼容性問(wèn)題，如果我真要實(shí)現(xiàn)上圖的布局風(fēng)格，怎么破呢？我嘗試了一下，如果需要強(qiáng)制實(shí)現(xiàn)上圖效果，可以在.b容器中添加一段代碼：

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

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

在線案例

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

via w3cplus