在线案例
网格区域实现元素占位区
在CSS Grid Layout中有一个关键东东，网格区域
grid-area。网格区域他是由四条网格线组成的一个空间，简单点说，一个网格单元格也是一个网格区域（因为他也是有四条网格线组成的一个空间），多个单元格合并在一起也是一个网格区域。这样一来，要实现上例的效果，还可以使用网格区域
grid-area来完成。在具体做案例之前，先简单的了解，网格区域是由哪几条网格线组成。组成网格区域的网格线顺序是
row-start/column-start/row-end/column-end。每个网格线之间也是使用
/来分隔。接下来将上例使用网格区域改造一下，改造之后的样式代码如下：
复制代码<font face=”Courier New”>
<font face=”Arial”>.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto;
}
.a{
grid-area: 1 / 1 / 2 / 2;
}
.b {
grid-area: 1 / 3 / 2 /4;
}
.c {
grid-area: 1 / 5 / 2 / 6;
}
.d {
grid-area: 1 / 7 / 2 / 8;
}
.e {
grid-area: 3 / 1 / 4 / 2;
}
.f {
grid-area: 3 / 3 / 4 / 4;
}
.g {
grid-area: 3 / 5 / 4 / 6;
}
.h {
grid-area: 3 / 7 / 4 / 8;
}
.i {
grid-area: 5 / 1 / 6 / 2;
}
.j {
grid-area: 5 / 3 / 6 / 4;
}</font>
</font>
效果如下：
在线案例
是不是让你的世界变得更简单了。
总结
在这篇文章中主要通过几个简单的实例向大家演示了如何使用定义网格，又是如何使用网格线实现单元格布局，可以说这样的布局弱爆了，和表格的单元格没有什么不一样嘛，但现实是残酷的，我们的布局是星罗万像，没有这么简单。不是说CSS Grid Layout很强大嘛，那又要如何实现一些复杂的布局呢？敬请观注下章分解，向大家阐述如何实现单元格合并效果。
