grid布局主要用作全面布局，二维布局；flexbox主要是轴布局，一维布局

grid将网页划分一个个网格，可以任意组合不同的网格，做出各种各样的布局

基本概念 ​

容器和项目 ​

采用网格布局的区域，成为“容器”，容器内部采用网格定位的子元素，称为“项目”

注：项目只能是容器的顶层子元素，不包含项目的子元素；Grid布局只对项目生效

行和列 ​

容器里面的水平区域称为“行”，垂直无语称为“列”

单元格 ​

行和列的交叉区域，称为“单元格”。正常情况下，n行和m列会产生 n * m 个单元格

网格线 ​

划分网格的线，称为“网格线”，水平网格线划分出行，垂直网格线划分出列

正常情况下，n行有n + 1 根水平网格线，m列有m+1根垂直网格线

容器属性 ​

display ​

指定一个容器采用网格布局

语法：display: grid;

• 默认情况下，容器元素都是块级元素，但也可以设置成行内元素。display: inline-grid;
• 注意：设定网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等属性都将失效

grid-template-columns、grid-template-rows ​

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

语法：

div {
	display: grid;
	/* 除了可以使用绝对单位，也可以使用百分比 */
	/* grid-template-columns: 33.33% 33.33% 33.33%;*/
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 200px 200px 200px;
}

repeat()函数 ​

当网格很多，重复写同样的值比较麻烦时，可以使用repeat()函数，简化重复的值

div {
	display: grid;
	grid-template-columns: repea(3, 100px);
	grid-template-rows: 200px 200px 200px;
}

• repeat()接收两个参数，第一个参数是重复的次数，第二个参数是所要重复的值
• repeat()重复某种模式也是可以的grid-template-rows: repeat(3, 100px 200px 300px);

auto-fill关键字 ​

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

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

fr关键字 ​

fr关键字（fraction的缩写，意为片段），是网格布局提供方便表示比例关系

如果两列的宽度分别为1fr和2fr，就

div {
	display: grid;
	/* 表示后者是前者的两倍 */
	grid-template-columns: 1fr 2fr;
	/* 可以与绝对长度的单位结合使用: 第一行高度为150px 第二行的高度是第三行的一半 */
	grid-template-rows: 150px 1fr 2fr;
}

minmax() ​

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

div {
	display: grid;
	/* 表示列宽不小于100px 不大于2fr */
	grid-template-columns: 100px 2fr;
}

auto ​

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

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

网格线名称 ​

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的使用

div {
  display: grid;
  /* 网格布局允许同一根线有多个名字 */
  grid-template-columns: [c1 c1-1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

布局示例 ​

grid-template-columns属性对于网页布局非常有用，两栏式布局只需要一行代码

.wraper {
	display: grid;
	grid-template-columns: 70% 30%;
}

row-gap、column-gap、gap ​

row-gap设置行与行之间的间隔（行间距）

column-gap设置列与列之间的间隔（列间距）

div {
	display: grid;
	row-gap: 20px;
	column-gap: 20px;
}

gap是row-gap和column-gap的合并简写形式

语法：

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

• 如果省略grid-gap省略了第二个值，浏览器认为第二个值等于第一个值

grid-template-areas ​

网格布局允许指定区域，一个区域由单个或搓个单元格组成。grid-template-arreas属性用于定于区域

div {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	/* 划分9个区域，然后将其定名为a~i的九个区域，分别对应着九个单元格*/
	grid-template-areas: 'a b c'
						 'd e f'
						 'g h i';
}

• 多个单元格合并成一区区域的写法：

div {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	/* 多个单元格合并成一个区域的写法 */
	grid-template-areas: 'header header header'
						 'main main sidebar'
						 'footer footer footer';
}

• 如果某个区域不需要利用，则使用点（.）来表示

div {
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	/* 中间列为点，表示没有用到该单元格，或者该单元格不属于任何区域 */
	grid-template-areas: 'a . c'
						 'd . f'
						 'g . i';
}

• 区域的命名会影响网格线，每个区域的起始网格线，会自动命名为区域名-start，终止网格线会自动命名为区域名-end

grid-auto-flow ​

划分网格以后，容器的子元素会按照顺序自动放置在每一个网格，默认的方式顺序是《先行后列》，即先填满第一行，再开始放入第二行

排序顺序由grid-auto-flow属性决定，默认值是row，即《先行后列》，也可以改成column，变成《先列后行》

语法：grid-auto-flow: 属性值

justify-items、align-items、place-items ​

justify-items属性设置单元格内容水平位置（start、center、end、stretch）

align-items属性设置单元格内容的垂直位置（start、center、end、stretch）

place-items属性是align-items、justify-items属性的合并简写形式

语法：place-items: <align-items> <justify-items>

justify-content、align-content、place-content ​

justify-content属性是整个内容区域在容器里面的水平位置（左中右）

align-content属性是整个内容区域的垂直位置（上中下）

div {
	display: grid;
	justify-content: 属性值;
	align-content: 属性值;
}

place-content属性是align-content属性和justify-content属性的合并简写形式

语法：place-content: <align-content> <justify-content>

• 如果省略第二个值，浏览器就会家顶第二个值等于第一个值

grid-auto-columns、grid-auto-rows ​

有时候，一些项目的指定位置，在现有网格的外部。比如：网格只有3列，但是某一个项目指定在第5行，这时浏览器会自动生成多余的网格，以便放置项目

grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高，他们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容大小，决定新增网格的列宽和行高

grid-template、grid ​

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、gird-auto-columns、grid-auto-flow这两个属性的合并简写形式

项目属性 ​

grid-column-start、grid-column-end、grid-row-start、grid-row-end ​

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线

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

/* 设置左边框是第二个垂直网格线，右边框是第四根垂直网格线 */
/* 没有指定上下边框，即采用默认位置，上边框是第一个水平网格线，下边框是第二根水平网格线 */
.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

/* 属性值可以指定网格线的名字 网格线名字查看：grid-template-columns和grid-template-rows属性 */
.item-2 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

/* 属性值可以使用span关键字表示，表示跨域，即左右边框（上下边框）之间跨域多少个网格 */
.item-3 {
/* 左边框距离右边框跨域2个网格 */
  grid-column-start: span 2;
}

• 如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

grid-column、grid-row ​

grid-column属性是grid-column-start和grid-column-end的合并简写形式

grid-row属性是grid-row-start和grid-row-end的合并简写形式

div {
	grid-column: <start-line> / <end-line>;
  	grid-row: <start-line> / <end-line>;
}

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

• 斜杠以及后面的部分可以省略，默认跨域一个网格

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

grid-area ​

指定项目放在哪一块区域

.item-1 {
  grid-area: e;
}

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

justify-self、align-self、place-self ​

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

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

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

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

place-self属性是align-self属性和justify-self属性的合并简写形式

语法：place-self: <align-self> <justify-self>;

• 如果省略第二个值，place-self属性会认为这两个值相等

阮一峰Grid网格布局教程