CSS 栅格结构的简单绘制

制作类似于图中小米商城的图标排列（栅格结构）

1、导入4只佩奇，并将图片设置为合适的大小

2、给外框架上一个边框方便查看判断

3、加入栅格结构

有几种写法：
一、

//设置为栅格结构
display:grid;
//这里行列各占2个，刚刚好填满，所以都是50%
//第1列占50%空间，第2列占50%空间
grid-template-rows: 50% 50%;
//第1行占50%空间，第2行占50%空间
grid-template-columns: 50% 50%;

二、

display:grid;
grid-template-rows: repeat(2,50%); //2份，每份占50%
grid-template-columns: repeat(2,50%);//2份，每份占50%

三、

display:grid;
grid-template-rows: repeat(2,1fr); //分2份，各占1份
grid-template-columns: repeat(2,1fr);//分2份，各占1份