(重点)“Grid“网格布局

网格布局（Grid）强大的页面布局 

1.概述

• 它是将网页划分为一个个网格，可以任意组成不同的网格，做出各种各样的布局，以前，只能通过复杂的CSS框架达到的效果

• 上图这样的布局，就是Grid布局的拿手好戏
• Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置，但是，它们也存在重大区别

• Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid布局则是将容器花粉为“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看做时候二维布局。Grid布局远比Flex布局强大

2.基本概念

1. 采用网格布局的区域，称为“容器（container）”。容器内部采用网络定位的子元素，

称为“项目（item）”

<div class="container">//父元素容器
  <div class="item">1</div>//项目（item）
  <div class="item">2</div>
  <div class="item">3</div>
  </div>

1. 行和列

• 容器里面的水平域为“行 （row）”，垂直区域称位“列（column）”。
• 下图，水平为“行”垂直为“列”

1. 网格线

• 划分网格的线，称为“网格线（grid line）”。水平网格线划分出“行”“垂直”网格线划分为列。

3.容器属性

1. Grid布局的属性分成两类，一列定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性，

1. display属性

1. 1. display：grid指定属性采用网格布局

div{
  display:grid;
}

使用display：grid；效果图。

1. grid-template-columns属性；

grid-template-rows属性；

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义没一列的列宽，

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

.container{
	display:grid;
  grid-template-columns:100px 100px 100px;
  grid-template-rows:100px 100px 100px;
}
//设定一个三行三列的网格，列宽和行高都是100px;

使用绝对单位px，还可以使用百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
//设定一个三行三列的网格，列宽和行高都是100px;

试图如下：

1. repeat()

• repeat函数，简化重复的值，

.container {
  display: grid;
  //接受两个参数，第一个参数是重复的次数，第二个参数是所有要重复的值
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

1. auto-fill关键字

• auto-fill自动填充

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

• 上面代码表示列宽度为100px，然后自动填充，知道容器不能放置更多的列，然后换行显示；

1. fr关键字

• 为了方便表示比列关系，网络布局提供了fr关键字（fraction的缩写，意为“片段”）。如果两列的宽度分部二为1fr和2fr，就表示后者是前者的两倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

• 上面的代码表示相同宽度的列

• fr可以与觉得长度的单位结合使用，这是会非常方便

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

• 上面的代码表示，第一列的宽度为150px，第二列的宽度时候第三列的一半。

1. minmax（）

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

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

1. auto关键字

• auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;
//第二列的宽度，基本上等于该列单元格的最大宽度，
除非单元格内容设置了min-width，且这个值大于最大宽度，

1. row-gap属性，

column--gap，属性

gap属性

• row-gap属性设置行与行的间距（行间距），column-gap属性设置列与列的间隔（列间距）；

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

• 代码中，grid-row-gap用于设置行间距，grid-column-gap用于设置列间距；

• 简写属性：

grid-gap: <grid-row-gap> <grid-column-gap

• 上面代码如下：

.container {
  grid-gap: 20px 20px;
}