探究grid容器属性、grid项目属性，grid使用技巧

grid布局

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

.grid-container{
    display: grid;	/* 将容器设置为grid布局 */
}

.grid-container{
    display: inline-grid;	/* 将一个行内元素设置为grid布局 */
}

一、grid容器属性

1.1、属性一览

容器属性	说明
grid-template-columns	定义列数和每列的宽度
grid-template-rows	定义每一行的高度
grid-gap	行距和列距的合并形式
grid-column-gap	列距
grid-row-gap	行距
place-items	单元格内容的位置
justify-items	单元格内容的水平位置
align-items	单元格内容的垂直位置
place-content	整个内容区域在容器中的位置
justify-content	整个内容区域在容器里面的水平位置
align-content	整个内容区域在容器里面的垂直位置
grid-auto-columns	给比预期多出点内容设置的宽度
grid-auto-rows	给比预期多出点内容设置的高度
grid-auto-flow	grid容器内的布局流
grid-template-areas	指定区域，一个区域由单个或多个单元格组成，需要项目结合grid-area属性使用
grid-template	grid-template-columns、grid-template-rows、grid-template-areas的合并
grid	grid-template-columns、grid-template-rows、grid-template-areas、 grid-auto-rows、 grid-auto-columns、grid-auto-flow的合并

注：从可读性的角度，不建议使用最后两个合并属性！

1.2、行列数+高宽度

• grid-template-columns，设定网格布局中的列数和宽度，有几个参数就代表有几列（不指定该属性的时候默认为1列）
• grid-template-rows，设定网格布局中每行的高度

.box{
    display: grid;
    grid-template-columns: auto auto auto;	/* 设定一个3列的网格容器 */
    grid-template-columns: 1fr 1fr 1fr;		/* 同上 */
    grid-template-columns: 200px auto 300px;/* 设定3列的网格容器，指定第1、3列的宽度，第2列宽度自适应*/
}

.box{
    display: grid;
    grid-template-rows: 100px 300px;	/* 设定第1行高度为100px，第2行高度为300px */
}

示意图见【前端练习】项目-CSS-grid练习

有些时候，浏览器会自动生成多余的网格，如：网格只有3列，但是某个项目指定在第5列，这时浏览器会生成多余的网格，以便放置项目。如果不指定，自动生成的多余网格的宽度，浏览器将根据剩余空间计算；高度将等于项目原本的高度（不同浏览器表现可能不同）

• grid-auto-columns，用来指定浏览器自动生成（而非用户自定义）的网格的列宽
• grid-auto-rows，用来指定浏览器自动生成（而非用户自定义）的网格的行高

1.3、网格间距

• grid-grap，同时指定行距和列距
• grid-column-grap，列距
• grid-row-grap，行距

注意：在间距属性中不能使用 fr单位！

.box{
    display: grid;
    grid-grap: 10px;	/* 方式一：行距和列距都为10px */
    grid-grap: 10px 20px;	/* 方式二：指定行距为10px，指定列距为20px */
    grid-column-grap: 20px;	/* 方式三：单独指定列距、或行距 */
}

示意图见【前端练习】项目-CSS-grid练习

1.4、单元格内容的位置排布

• justify-items，设置单元格内容的水平位置
• align-items，设置单元格内容的垂直位置
• place-items，前两者的简写，先后顺序依次为：align-items、justify-items

取值范围：

start	end	center	stretch
对齐单元格起点	对齐单元格终点	单元格内部居中	（默认值）拉伸占满整个单元格宽度

示意图见【前端练习】项目-CSS-grid练习

1.6、容器内容的位置排布

• justify-content，整个内容区域在网格容器内的水平位置
• align-content，整个内容区域在网格容器内的垂直位置
• place-content，前两者的合并，先后为：align-content、justify-content

取值范围：

start	end	center	stretch
对齐容器起点	对齐容器终点	居中	向两端拉伸
space-between	space-around	space-evenly
项目之间的间隔相等，与边框没有间隔	每个项目两侧的间隔相等	项目与项目、边框的间隔相等

示意图见【前端练习】项目-CSS-grid练习

1.7、区域化网格

网格布局允许指定”区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid项目使用grid-area选择自己放置的区域。

.box{
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
}

使用gird-template-areas有三条规则需要注意：

1. area名字需要填满所有网格
2. 同一个area名只能出现在连续的网格中
3. 连续网格必须组成一个正方形

使用方法，见【前端练习】项目

1.8、grid容器布局流

grid-auto-flow属性，用来指定网格容器内子项目的排放顺序。

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

取值范围：

row	column	dense
严格的“先行后列”	严格的“先列后行”（必须同时指定每行的宽度，即指定行数）	先行后列，如果本行的剩余单元格放不下下一个元素，将试图用后面较小的子元素填补这个空白的空间
row dense	column dense
不严格的“先行后列”	不严格的“先列后行”（同样必须指定行数）

示意图见【前端练习】项目-CSS-grid练习

二、grid项目属性

2.1、属性一览

项目属性	说明
grid-column-start/end	网格 起始/终止 的纵向网格线
grid-row-start/end	网格 起始/终止 的横向网格线
grid-column	指定网格的列起点、终点
grid-row	指定网格的行起点、终点
grid-area	需要和容器的grid-template-areas属性一起使用 用来指定项目放在哪个区域
justify-self	设置单元格内容的水平位置
align-self	设置单元格内容的垂直位置
place-self	前两者的合并，先后顺序为：align-self、justify-self

2.2、grid网格线介绍

划分网格的线，称为”网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。网格线的序号从1开始。

2.3、grid-column和grid-row

grid-column属性用来指定grid项目起始和终止的纵向网格线，grid-row用来指定grid项目起始和终止的横向网格线。

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

/* 等价于 */
.item1{
    grid-column: 1/2;
    grid-row: 1/2;
}

/* 等价于 */
.item1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

2.4、grid-area

grid-area属性指定项目放在哪一个区域。需要与grid容器属性grid-template-areas搭配使用，后者指定区域范围和区域名，前者选择当前项目所放置的区域。

使用示例见 grid-template-areas

2.5、place-self

• place-self，是align-self和justify-self的合并简写
• align-self，网格内内容的垂直位置
• justify-self，网格内内容的水平位置

取值范围：

start	center	end	stretch
对齐网格起点	网格居中	对齐网格终点	网格内拉伸

与grid容器属性place-items作用一致，取值范围也一致。不过前者设置的是单个grid项目，后者设置的是grid容器内所有项目

三、gird使用技巧

3.1、repeat()函数

grid-template-columns: repeat(2,2fr 1fr);	/* 相当于grid-template-columns: 2fr 1fr 2fr 1fr */

3.2、auto-fill

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

grid-template-columns: repeat(auto-fill, 100px); 
/*前面每一列宽为100px，最后一列宽度不一定是100px，但会自适应宽度 */

3.3、fr单位

表示列之间的比例关系，自动根据容器宽度计算分配宽度，可以与绝对单位一起使用，但是不能用作网格间隙的单位

3.4、minmax()函数

使用fr单位决定列宽的时候，宽度会随着视口的大小等比例放大缩小，但是有时这会导致内容排版出现很糟糕的效果。可以使用minmax函数限制列宽的最大最小值

grid-auto-rows: minmax(100px, auto);	/* auto表示浏览器自动决定高度 */

3.5、定义网格线名称

在使用grid-template-columns和grid-template-rows属性定义列和行时，可以使用方括号定义每一根网格线的名字，方便项目中使用。

.box{
    grid-template-columns:  [c1] 100px [c2] 100px [c3] auto [c4];
    grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

3.6、自动多列填充

不管容器尺寸怎么变化，容器总是会被填满（列数不固定，最后一列宽度自适应）

.container{
	display:grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}

技巧核心：repeat()函数+auto-fill关键字，用auto-fill取代具体的列数

示例见【前端练习】项目

参考文章

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

CSS 网格布局 | 菜鸟教程 (runoob.com)