grid布局

Grid 布局是什么？

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

Grid 布局和 flex 布局

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！

Grid 的一些基础概念及属性

.wrapper {
  /* margin: 60px; */
  /* 声明一个容器 */
  /* display: grid; */
  /*  声明列的宽度，repeat(3, 200px)表示列数为3列，每列宽度是200px  */
  /* grid-template-columns: repeat(1, 200px); */


  /* 1、auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。
  grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素 */
  /* grid-template-columns: repeat(auto-fill, 200px); */

  /* 2、fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。
  grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3,相当于flex的flex属性 */
  /* grid-template-columns: 200px 1fr 2fr; */

  /* 3、minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，
  表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。
  grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍 */
  /* grid-template-columns: 1fr 1fr minmax(300px, 2fr); */

  /* 4、auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。
  grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度 */
  /* grid-template-columns: 100px auto 100px; */
  
  /* 5、grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
    可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
    grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
    .item-1 {
  	  grid-column: 1 / 3;
 	  grid-row: 1 / 2;
	}
	/* 等同于 */
	.item-1 {
	  grid-column-start: 1;
	  grid-column-end: 3;
	  grid-row-start: 1;
	  grid-row-end: 2;
	}
	使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序
	这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格
	grid-column-start: span 2;
    [演示地址](https://codepen.io/gpingfeng/pen/PoZgopr)
  */
  /* 6、grid-auto-flow
  	划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行 */
  		grid-auto-flow: row;
  /* grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置	 */
  		grid-auto-flow: row dense;

  /*  声明行的高度, 每一行的高度，多少行就可以配置多少个高度  */
  /* grid-template-rows: 100px 200px 50px 60px; */
  /*  声明行间距和列间距  */
  /* grid-gap: 20px; */
  
  /* grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性， 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的 */
}

.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

  <div class="wrapper">
    <div class="one item">One</div>
    <div class="two item">Two</div>
    <div class="three item">Three</div>
    <div class="four item">Four</div>
    <div class="five item">Five</div>
    <div class="six item">Six</div>
  </div>

Grid 实战——实现响应式布局

1、fr 实现等分响应式

fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。利用这个特性，我们能够轻易实现一个等分响应式。grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分

演示地址

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

2、repeat + auto-fit——固定列宽，改变列数量

等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现，接下来看看更高级的响应式

上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：

演示地址

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

3、repeat+auto-fit+minmax 去掉右侧空白

上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。如果列的宽度也能在某个范围内自适应就好了。minmax() 函数就帮助我们做到了这点。将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 表示列宽至少 200px，如果还有空余则一起等分。代码以及效果如下所示：

演示地址

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

4、repeat+auto-fit+minmax-span-dense 解决空缺问题

似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。具体的代码与效果如下所示：

演示地址

.item-3 {
  grid-column-start: span 3;
}

去掉空白

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;//效果显示确实挺好，但是会改变内容布局，实际项目斟酌使用
}