​grid的属性和用法

 grid-template-columns 属性设置列宽，rid-template-rows 属性设置行高

1.auto-fill 关键字

表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。

//  一个单元格的宽为200px，会显示最多的单元格

grid-template-columns: repeat(auto-fill, 200px);

2.fr的用法

表示第一个列宽设置为200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3

grid-template-columns:200px 1fr 2fr;

 // 表示一行显示5个，宽度分别为剩余宽度的1/5

grid-template-columns: repeat(5, 1fr)

//表示占据总共宽度的几分之几

// 1/4  1/4  2/4  1/4

grid-template-columns: 1fr 1fr 2fr 1fr;

3.minmax() 函数

给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。

//第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

grid-template-columns: 1fr 1fr minmax(300px, 2fr) 

4.auto 关键字，由浏览器决定长度。

过 auto 关键字，我们可以轻易实现三列或者两列布局

//表示第一第三列为 100px，中间由浏览器决定长度

grid-template-columns: 100px auto 100px 

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

grid-template-areas 属性

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

.item1 {
  grid-area: myArea;
}
.item2 {
  grid-area: myArea2;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .''. . .myArea2 myArea2 ';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

grid-area 属性

使用grid-area 属性指定网格元素的位置。

语法：grid-row-start / grid-column-start / span rowNum / span columnNum.

 grid-area: 2 / 1 / span 2 / span 4;

从第 2 行开始和第 1 列开始， 横跨 2 行 4列

grid-auto-flow 属性

grid-auto-flow: row dense，表示尽可能填满表格。 默认row，column

grid-auto-flow: column;  逐列填充来排列元素

grid-auto-flow: row;  逐行填充来排列元素

grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线

grid-column-start 属性定义了网格元素从哪一列开始。

.item1 {
  grid-column-start: 2;
}

grid-column-start 属性定义了网格元素从哪一列结束。

.item1 {
  grid-column-end: 4;
}

grid-row-end 属性指定哪一行停止显示网格元素，或设置跨越多少行。

.item1 {
  grid-row-end: span 3;
}

grid-row-start 属性指定哪一行开始显示网格元素。

.item1 {
  grid-row-start: 2;
}

grid-column 属性

设置 "item1" 在第 1 列开始，在第 5 列前结束：

.item1 { grid-column: 1 / 5; }