关于Grid网格布局的用法整理

CSS传统布局一般都是基于盒状模型，有例如div+CSS，利用positon, float等布局，灵活性较高，但对于一些特殊布局（垂直居中）实现起来相当麻烦。

flex弹性布局较好的解决了这个问题，同时flex的兼容性也相当不错，除了IE8.9以及其他浏览器一些低版本之外，基本上兼容现在主流的浏览器，如果没有特别需要保证IE的兼容性可以放心使用。

flex是一维布局，即行列同时只能操作一个的，具体用法可参照：阮一峰Flex布局教程

Grid布局与flex布局有类似的部分，建议学完flex布局再学习Grid，与flex不同的是Grid是基于网格的二维布局，可以同时处理行与列，将子元素看作网格元素进行处理，可以简单的实现一些主流布局。

但是，Grid的兼容性却是一个较大的问题，从图中可以看到，大部分浏览器的低版本都无法兼容Grid，所以Grid的工程使用需要谨慎。

与flex类似，在Grid中也有容器（Container）与项目（item）概念，对应父容器和子元素，下面简单总结Grid的相关用法：

一、容器属性

设置Grid布局：

//指定一个容器采用网格布局，作为块级元素
div{
   
	display:grid;
}
//指定一个容器采用网格布局，作为行内元素
div{
   
	display:inline-grid;
}

划分行列：

//grid-template-colunms表示列
//grid-template-rows表示行
//划分了4个高宽各为30px的方块，除了px等长度单位也可以用百分比
.container{
   
	display:grid;
	grid-template-colunms:30px 30px;
	grid-template-rows:30px 30px;
}

//repeat() 
//第一个参数表示重复的次数，第二个参数表示要重复的值
.container{
   
	display:grid;
	grid-template-columns:repeat(2,50%);
	grid-template-rows:repeat(2,100px 50