这是我参与8月更文挑战第8月更文挑战第4天，活动详情查看：8月更文挑战
很多人都认为布局是UI的事，和前端没多大关系。 其实不然，我们coding时不可能简单粗暴的元素堆砌，那代码将会惨不忍睹。 比如，现在拿到这样一张布局的效果图，先抛开内容，我们怎么构思布局：
图中可以看出，2、4、5、7是相对其它特殊的。若使用UI框架的栅格并不是那么友好。
那如果用flex布局，但是这样你需要给每一列一个高度才行，也是相对麻烦的。
这时候轮到强大的grid二维布局登场。
首先分析一下：一个大容器里有一三行三列的网格，第一列和第三列的宽一致，第一行与第三行的高一致。
上代码：
.gridContainer {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 28% 37% 28%;
column-gap: 2%;
row-gap: 3%;
}
display:grid 给出限制，告诉浏览器即将采用怎样的布局。 grid-template-columns 设定行宽，你可以使用具体的%，也可以用fr，这里表示中间的宽度是两边宽度的2倍
grid-template-rows 就是给定行高了，column-gap 行间距， row-gap 列间距
第一步完成，但是我们效果图中可以看到，2、5应该是合并成一个区域，这个也简单，数学有小学一年级的基础就够了：
.item2 {
grid-column-start: 2; // 网格行第二根线开始
grid-column-end: 3; // 网格行第三个线结束
grid-row-start: 1; // 网格列第一根开始
grid-row-end: 3; // 网格列第三个结束
}
我们要注意一点，因为这里面加了行、列间距，所以这里面相邻的线算一根。
完整代码：
这是具体项目内容，具体细节可以参看阮大神的讲解， 参考网址：www.ruanyifeng.com/blog/2019/0…
（默默提个醒，不知道你看出没最终效果图与代码的差异😁）
