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;