网页制作Grid布局

Grid布局也叫网格布局，同样是一种新的强大的布局方式。
Grid布局的实现方式是将网页划分为一个个网格，通过组合不同的网格，做出各种各样的布局。
Grid布局与以前的布局，如Flex相比有什么不同呢？
Flex布局针对轴线进行布局，Grid划分行和列，然后指定元素所在位置，Grid能更准确方便的达成我们想要的布局效果，无疑是一种更好用的布局方式
现在Gird和Flex一样浏览器内置了，通过css样式属性就能使用，display:grid指定容器采用网格布局，和Flex一样Grid属性分为了容器属性和项目属性。
容器属性grid-template-columns定义每一列的宽度，grid-template-rows定义每一行的高。比如：
display:grid
grid-template-columns：100px 100px 100px;
grid-template-rows:100px 100px 100px;
这就设置了容器是一个三行三列且宽高都为100px的网格；
更详细使用方式请参考官方教程。