今天要讲解的这个问题是之前一位小伙伴在群里请教的提问，是关于跨行跨列的布局，如下图是他要实现的具体布局，看似是最简单的二维布局，实际透露出整个CSS的发展方向。向前可以考察对兼容性的处理功底，向后可以考察对CSS新特性的洞察能力。可攻可受，攻守兼备。
如果对此问题感兴趣的小伙伴先不要往下看我写的方案，自己想想在实际项目中遇到你会怎么做呢？
需要注意的是：这是一个两端对齐的布局，需要仔细考虑中间空隙的处理。
这里我给出三种方案实现，分别使用css中属性float实现、flex实现、grid实现
一、兼容方案 float
我想大家最容易想到的就是运用 float 的浮动特性，为了更好的处理间距，我们需要三层结构，利用 margin 负值来抵消间距，形成视觉上的两段对齐效果。
HTML部分：
float 实现
a
b
c
d
e
CSS部分：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1,
h2 {
text-align: center;
color: #555;
}
.demo {
width: 620px;
height: 310px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.demo section {
