gird布局

最近在工作用，看见同时的代码，是gird布局，一脸的懵逼，后来学习了一下，略懂。

我们常用的布局有文档流布局，浮动布局，flex弹性布局，这些布局都是用在一维的比较多。用在二维的话，比较难受。

所以，gird是专门用户布局二维的。直接开干。

<div class="container">

　　<div class="item1">item1</div>

　　<div class="item2">item2</div>

　　<div class="item3">item3</div>

</div>

只讲最实用，也是最常用的属性

.container {

　　width:400px;

　　height:400px;

　　//下面是gird属性

　　//第一行高度为100px 第二行高度为200px 第三行高度为100px　　　

　　gird-template-row:100px 200px  100px;

　　//第一列宽为200px 第二列宽为100px 第三列宽为100px

　　gird-template-column:200px 100px 100px;

}

//直接设置item的位置

.item1 {

　　//item1 占有的高度为：第1行到第3行（不包含第3行）

　　gird-row:1 / 3; 

　　//item1 占有的宽度为：第1列到第2行（不包含第2列）

　　gird-column: 1 / 2;

}