【CSS3】grid 网格布局
网格布局 ( grid 布局 )
- 网格容器：网格容器是所有网格项的父元素；eg: 下例中类名为 container 的 div 就是网格容器
- 网格项：网格项是网格容器的子元素；eg: 下例中类名为 item 的 div 就是网格项
<style>
.container {
display: grid;
}
style>
<div class="container">
<div class="item">网格项 1div>
<div class="item">网格项 2div>
<div class="item">网格项 3div>
<div class="item">网格项 4div>
div>
- 网格线：构成网格结构的水平和垂直分割线就是网格线；eg: 下图中有 4 条行网格线和 4 条列网格线
- 网格轨道：两条相邻的网格线之间的区域就是网格轨道
- 网格单元：两条相邻的列网格线和两条相邻的行网格线围起来的就是网格单元
注意事项
- 设置
display: grid后网格项会转换为block - 也可以设置
display: inline-grid，网格项就会转换成inline-block - 默认情况下：
① 网格项的宽度默认继承网格容器的 100%
② 若网格容器未设置高度，则网格项的高度默认由网格项自己的内容撑开；
若网格容器已设置高度，则网格项的高度默认平分网格容器的高度
③ 设置后子级项目符合怪异盒模型
④float、column、clear、vertical-align等设置都对网格项失效
网格项之间的间隙
可以为网格容器设置网格线的宽度，以控制单元格之间的间隙
row-gap- 行网格线的宽度 - 行间隙：
.container {
display: grid;
row-gap: 20px;
}
column-gap列网格线的宽度 - 列间隙：
.container {
display: grid;
column-gap: 20px;
}
gap- 复合写法：
gap: 20px 10px; /* 行间隙为 20px; 列间隙为 10px */
gap: 15px; /* 行间隙和列间隙都为 15px */
行高 & 列宽
grid-template-columns
grid-template-columns用于设置网格容器中所需的列数及每列的宽度
1. 设置定值
- 该属性接收一个或多个非负 CSS 长度值，这些值的个数就是网格容器的列数，每个值表示每列的宽度
- 宽度之间用空格分开
- 这些非负 CSS 长度值的单位可以为
px/%
grid-template-columns: 100px 100px 100px;
grid-template-columns: 80% 20%;
2.
repeat()函数
- 单位：
px/%
grid-template-columns: repeat(列数, 每列的长度);
grid-template-columns: repeat(重复的次数, 第1列宽度 第2列宽度);
3.
auto-fill关键字
- 自动排满父级的宽度 (一般用于父级宽度不确定时)
grid-template-columns: repeat(auto-fill, 每列的宽度);
4.
fr关键字
- 设置了 fr 的子级按比例分配父级的宽度，可以与绝对长度的单位结合使用
grid-template-columns: 1fr 2fr;
grid-template-columns: 150px 1fr 2fr; /* 第一列为150px，剩余宽度按比例划分 */
5.
auto关键字
grid-template-columns: 100px auto 100px; /* 第二列自适应 */
6.
minmax()
grid-template-columns: 1fr 1fr minmax(100px, 1fr); /* 将第三列的宽度控制在 100px~1fr 之间 */
grid-template-columns: 1fr 1fr minmax(100px, auto); /* 设置第三列的宽度 >= 100px */
7. 网格线的名称
该属性可以使用方括号来指定每一条网格线的名字，方便引用
grid-template-columns: [名称1] 第一列宽度 [名称2] 第二列宽度;
布局实例：
grid-template-columns: 70% 30%;
grid-template-columns: repeat(12, 1fr);
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自适应排列数量 */
grid-template-rows
grid-template-rows用于设置网格容器中每行的高度- 与
grid-template-columns不同，grid-template-rows没有指定网格容器的行数 - 可用于
grid-template-rows的属性值与grid-template-columns一样
grid-template-rows: repeat(2, 5px 30px);
上例设置了前 4 行的高度。若网格容器中的网格项有很多，超过了 4 行，则从第 5 行开始，行高为网格项默认高度
项目的对齐方式
当网格项的总宽高 < 网格容器的宽高时，可以通过以下属性设置网格项的对齐方式
justify-content
justify-content 用于设置网格项在水平方向上的对齐方式
start：从左往右end：从右往左center：居中stretch(默认)：拉伸占据整个网格容器
如果设置了width，则与start等效space-between：两端对齐，子元素之间自动留有空隙space-around：父子元素之间也有空隙，为子元素之间的空隙的一半space-evenly：父子元素之间的空隙 = 子元素之间的空隙
align-content
align-content 用于设置网格项在垂直方向上的对齐方式
start：从上往下end：从下往上center：居中stretch(默认)：拉伸占据整个网格容器
如果设置了height，则与start等效space-between：两端对齐，子元素之间自动留有空隙space-around：父子元素之间也有空隙，为子元素之间的空隙的一半space-evenly：父子元素之间的空隙 = 子元素之间的空隙
place-content
place-content 为 justify-content & align-content 的复合写法：
place-content: ;
项目内容的对齐方式
justify-items
-
水平方向：
justify-items: stretch; /* 默认拉伸，占满单元格的宽度 */
设置以下属性后，网格项的内容的宽度由内容撑开
start：对齐单元格的起始边缘end：对齐单元格的结束边缘center：单元格内部居中
align-items
-
垂直方向：
align-items: stretch; /* 默认拉伸，占满单元格的宽度 */
设置以下属性后，项目内容的高度会被压缩至 content 的高度
start：对齐单元格的起始边缘end：对齐单元格的结束边缘center：单元格内部居中
place-items
justify-items&align-items的复合写法：
place-items: ;
单个项目的内容的对齐方式 *
以下属性需要设置在指定的网格项中
justify-self
justify-self 用于设置当前网格项的内容在水平方向上的对齐方式：
startendcenterstretch(默认)
align-self
align-self 用于设置当前网格项的内容在垂直方向上的对齐方式：
startendcenterstretch(默认)
place-self
place-self 为 justify-self & align-self 的复合写法：
place-self: ;
项目的位置 & 合并 *
以下属性需要设置在指定网格项上，控制项目的位置以及大小
grid-column
grid-column 用于合并列：
grid-column-start: 网格线的序数 / 网格线的名字; /* 左边框所在的垂直网格线 */
grid-column-end: 网格线的序数 / 网格线的名字; /* 右边框所在的垂直网格线 */
grid-column: / ; /* 合并写法，第一个数：左边序号；第二个数：右边序号 */
grid-row
grid-row 用于合并行：
grid-row-start: 网格线的序数 / 网格线的名字; /* 上边框所在的水平网格线 */
grid-row-end: 网格线的序数 / 网格线的名字; /* 下边框所在的水平网格线 */
grid-row: / ; /* 合并写法 */
实例
grid-column: 1 / 3;
grid-row: 1 / 2;
/* 等同于 */
grid-column: 1 / span 2; /* span n 表示跨过 n 格 */
grid-row-start: 1;
grid-row-end: 2;
/* 等同于 */
grid-column: 1 / span 2;
grid-row: 1;
grid-area
grid-area 为 grid-column & grid-row 的符合写法：
grid-area: / / / ;
定义网格模板
grid-template-areas
该属性需要给网格容器设置，用于定义网格的整体布局
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'header header header'
'sidebar content content'
'footer footer footer';
如果某些区域不需要利用，则使用 . 表示，表示没有用到该单元格，或者该单元格不属于任何区域
grid-template-areas: 'header . header'
'sidebar . content'
'footer . footer';
区域的命名会影响到网格线：每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end
grid-area *
- 该属性需要给网格项设置，用于定义该网格项的名称
- 设置了相应名称的网格项会移到网格布局中对应的位置上
grid-area: sidebar;
grid-auto-flow
该属性用于定义网格的排列顺序
row(默认)：先行后列column：先列后行row dense：先行后列，并且尽可能紧密填满，尽量不出现空格column dense：先列后行，并且尽可能紧密填满，尽量不出现空格
grid-auto-flow: row;
隐式网格轨道
- 当我们设置的网格不足以放下所有的网格项时，就会自动出现一些网格轨道
- 这些网格轨道的高度默认是 auto 的，可以使用
grid-auto-columnsgrid-auto-rows来指定网格轨道的大小
.container {
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 80px;
}
上例就指定了网格轨道的宽度为 100px，高度为 80px
标题后面带
*号的，表示该属性需要给网格项设置