Gird网格布局
指定一个容器采用网格布局，在父元素中定义grid属性
display:grid; //块级元素布局
或
display:inline-grid; //行内元素
在容器中添加了网格布局后，就要划分行和列，columns(列)、row(行)
grid-template-columns //定义每一列的宽度
grid-template-row //定义每一行的高度
当使用gird布局后，容器子元素中的float、display:inline-block、vertical-align都会失效
实例效果如下：
<div class="main">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
.main{
display: grid;
grid-template-columns: 100px 100px 100px;// 定义一行三列，每列的宽度，也可以使用百分比
grid-template-rows: 100px 100px 100px;// 定义一行三列，每列的高度度，也可以使用百分比
}
20201118115220326.png
这样就简单的实现了grid布局。但是感觉grid-template-columns: 100px 100px 100px;这样写非常麻烦，尤其是列数多的时候。这时我们可以使用==repeat()函数==，这样可以简化重复。现在用==repeat()函数== 看下效果
.main{
display: grid;
grid-template-columns: repeat(5,20%);// 第一个参数代表每一行有5列, 每列的宽度是20%
grid-template-rows: repeat(5,100px);// 第一个参数代表每一行有5列, 每列的高度是100px
}
20201118120254184.png
为了方便表示比例关系，可以使用==fr== 关键字， 1fr 和2fr 表示后者是前者的两倍，
.main{
display: grid;
grid-template-columns: 1fr 1fr; //这里不用逗号分隔
}
20201118134653843.png
如果在项目中，我们经常对页面布局采用左右两栏的布局，这样我们就看下代码
.main{
display: grid;
grid-template-columns:30% 70%;// 30%表示左侧栏的宽度， 后者是右侧栏的宽度
}
下面就说下行间距和列间距：
grid-row-gap 表示行间距
grid-column-gap 表示列间距
grid-row-gap: 20px;
grid-column-gap: 20px;
或者简写成
grid-gap: 20px 20px;
