grid网格布局实例

grid网格布局实例
一起来学习一下grid网格布局的一个小案例
eg：百度风云榜

上代码：
（1）划分区域

按照图示首先划分七个区域：
结构：
样式：
1.划分为3列4行

（2）加上网格的间距：

（3）找到网格指定的区域：

先加上红色的背景色看一下运行效果：

（4）分别给每块加上颜色


此时每块的背景色就完成了：

（5）给对应的块加上文字，再加上样式就完成这个简单的网格布局了

效果图：