首先来看一下效果图
接下来废话不多说，先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 610px;
height: 610px;
margin: 100px auto;
display: grid;/* 说明以grid布局 */
grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */
grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */
}
.a{
grid-column-start: 1;/* 单元格开始的那条列线 */
grid-column-end: 2;/* 单元格结束的那条列线 */
grid-row-start: 1;/* 单元格开始的那条行线 */
grid-row-end: 4;/* 单元格结束的那条行线 */
background: #5a5eff;
}
.b{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #F672E2;
}
.c{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #FDF505;
}
.d{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #F90B0B;
}
.e{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
background: #41a8ff;
}
.f{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
background: #10FDD0;
}
.g{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 6;
background: #16FA07;
}
</style>
</head>
<body>
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
</div>
</body>
</html>
代码就这么多，还是挺简单的。
网格如下划分成五列，则用了6条列线
划分为五行，则用了6条行线
（请随意吐槽这张图片）
主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下
结合这张图片，应该很好理解的
还是很容易理解 的。