grid网格布局

Grid 布局的属性分成两类
容器属性:

div {
  display: grid;
  //1、绝对长度写法
  grid-template-columns: 100px 100px 100px; //定义每一列的列宽
  //2、百分比写法
  // grid-template-columns: 33.33% 33.33% 33.33%;
  //3、repeat(重复的次数，所要重复的值) 写法
  // grid-template-columns: repeat(3, 33.33%);
  //4、auto-fill关键字 自动填充，每行尽量多的填充100px，直到放不下，在换行
  // grid-template-columns: repeat(auto-fill, 100px);
  //5、fr关键字 如下：每行共分3份，前者占一份，后者占两份（可以与绝对长度的单位结合使用）
  // grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px 100px; //定义每一行的行高
  grid-row-gap: 20px; //行与行的间隔（行间距）
  grid-column-gap: 20px; //列与列的间隔（列间距）
  //grid-gap: 20px 20px; 结合写法  
  //grid-gap: 20px; 结合写法  
  grid-auto-flow: column; //容器子元素顺序;默认值是row，即"先行后列";也可以将它设成column，变成"先列后行";
}

项目属性:

1、指定项目的四个边框，分别定位在哪根网格线

//grid-column-start属性：左边框所在的垂直网格线
//grid-column-end属性：右边框所在的垂直网格线
//grid-row-start属性：上边框所在的水平网格线
//grid-row-end属性：下边框所在的水平网格线
.div1{
  grid-column-start: 2;rvr
}

2、grid-column属性和grid-row属性(指定项目的四个边框)

.div1 {
  grid-column: 1/3;//grid-column属性是grid-column-start和grid-column-end的合并简写形式
  grid-row: 1/2;//grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
}
/* 等同于 */
.div1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
/* 等同于 */
//span关键字，表示跨越多少个网格
.div1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 1;
}

3、grid-area 属性

//grid-area属性指定项目放在哪一个区域。
.div1 {
  grid-area: f; //a、b、c、d、e、f、、、
}
//grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
.div1 {
  grid-area: 1/1/3/3;
}

4、justify-self 属性，align-self 属性，place-self 属性

//justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目
// justify-self: start | end | center | stretch;

//align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
//align-self: start | end | center | stretch;

//start：对齐单元格的起始边缘
//end：对齐单元格的结束边缘
//center：单元格内部居中
//stretch：拉伸，占满单元格的整个宽度（默认值）

.div1  {
  justify-self: start;
}

//place-self:<align-self> <justify-self>;(align-self属性和justify-self属性的合并简写形式)
.div1 {
  place-self: center center;
}

注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效