grid网格布局

一.概念

grid布局意为网格布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，grid布局的功能非常的强大，对浏览器的兼容性有一定的要求。

二.与flex布局的区别

flex布局意为弹性盒布局，用来为盒装模型提供最大的灵活性。只是轴线上的布局，可以看做是一维布局。

grid网格布局，通过对不同网格的组合，可以做出各种各样的布局。可以看做是二维布局。功能比flex布局强大。

三.容器的属性

grid-template-columns：定义每一列的属性。

grid-template-rows：定义每一行的属性。

（1）使用绝对单位

/* 定义了一个三行三列的网格，每一行每一列的长度都为100px */
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

(2）使用相对单位

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
/* 对于同样的值可以用repeat()简写，接收两个参数，第一个参数是重复的次数，第二个参数是重复的值。*/
.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);  /* 重复某种模式：repeat(2, 100px 20px 80px); */
}

（3）auto-fill 关键字：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

/* 每列宽度100px，然后自动填充，直到容器不能放置更多的列。*/
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

（4）fr 关键字：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。可以和绝对单位、相对单位一起使用。

/* 表示两个相同宽度的列。 */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* 表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。*/
.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

（5）minmax()：minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

/* minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}

（6）auto：关键字表示由浏览器自己决定长度。

/* 表示第一列和第三列宽度为100px,中间的宽度自适应*/
.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

1. grid-row-gap：设置行与行的间隔（行间距）

2. grid-column-gap：设置列与列的间隔（列间距）

3. grid-gap：是grid-column-gap和grid-row-gap的合并简写形式。如果只写一个值默认两个值一样

/* 行间距为20px,列间距为20px */
.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
/* 等价于 */
.container {
  grid-gap: 20px 20px;
}

4.justify-items：设置单元格内容的水平排列情况，可以取4个值

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

5.align-items：设置单元格内容的垂直排列情况，可以取4个值

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

/* 单元格的内容左对齐，效果如下图。*/
.container {
  justify-items: start;
}

/* 单元格的内容头对齐，效果如下图。*/
.container {
  align-items: start;
}

6.place-items：是align-items属性和justify-items属性的合并简写形式，如果只写一个值表示两个值一样。例如：place-items: start end;

7.justify-content：是整个内容区域在容器里面的水平位置（左中右），可以取7个值。

start：对齐容器的起始边缘。

end：对齐容器的结束边缘。

center：容器内部居中。

stretch：拉伸，项目大小没有指定时，拉伸占据整个网格容器。（默认）

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

对应的如图所示：

8.align-content：是整个内容区域在容器里面的垂直位置（上中下）。可以取7个值，和justify-content一模一样。

9.place-content：是align-content属性和justify-content属性的合并简写形式。例如：place-content: space-around space-evenly;

四.项目的属性

1.（1）grid-column-start：左边框所在的垂直网格线，还可以用span表示跨越几个网格线。例如：span 2表示跨越2个网格线。

（2）grid-column-end：右边框所在的垂直网格线

（3）grid-row-start：上边框所在的水平网格线

（4）grid-row-end：下边框所在的水平网格线

/* 表示1号项目的左边框在第一根网格线，右边框在第三根网格线，上边框在第二根网格线，下边框在第四根网格线。
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

2.（1） grid-column：是grid-column-start和grid-column-end的合并简写形式。例如：grid-column: 1 / 3;

grid-row: 1 / 2。如果只写一个值表示默认跨越一个网格。

（2）grid-row：是grid-row-start和grid-row-end的合并简写形式。

（3）grid-area：是grid-column-start、grid-column-end、grid-row-start、grid-row-end这四个的合并简写形式。例如：grid-area: 1 / 1 / 3 / 3;

3. （1） justify-self：设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

* start：对齐单元格的起始边缘。

* end：对齐单元格的结束边缘。

* center：单元格内部居中。

* stretch：拉伸，占满单元格的整个宽度（默认值）

（2）align-self：设置单元格内容的垂直位置（左中右），跟align-items属性的用法完全一致，但只作用于单个项目。

（3）place-self：是align-self属性和justify-self属性的合并简写形式。例如：place-self: center center;如果只有一个值，则默认为两个值相同。

五.实现三列布局（中间自适应，两端固定宽度）

1. 方法一：flex布局（关键步骤在于给中间部分设置flex:1）

<style>
  .box{
       display:flex;
   }
   .center{
       flex:1;
       background-color: pink; 
   }
  .left{
       width:200px;
       height:400px;
       background-color: plum; 
       order:-1 
   }
   .right{
       width:200px;
       height:400px;
       background-color: plum;  
   }
</style>
<div class="box">
   <div class="center"></div>
   <div class='left'></div>
   <div class="right"></div>
</div>

2.方法二：grid布局（关键步骤在于设置grid-template-columns的auto属性值）

<style>
 .box{
      display:grid;
      grid-template-columns:200px auto 200px;
 }
 .center{
      background-color: pink;  
  }
  .left{
      height:400px;
      background-color: plum;
      order:-1 
  }
  .right{ 
      height:400px;
      background-color: plum;  
  }
</style>
<div class="box">
   <div class="center"></div>
   <div class='left'></div>
   <div class="right"></div>
</div>