网格布局 ( grid 布局 )
- 网格容器:网格容器是所有网格项的父元素;eg: 下例中类名为 container 的 div 就是网格容器
- 网格项:网格项是网格容器的子元素;eg: 下例中类名为 item 的 div 就是网格项
<style>
.container {
display: grid;
}
</style>
<div class="container">
<div class="item">网格项 1</div>
<div class="item">网格项 2</div>
<div class="item">网格项 3</div>
<div class="item">网格项 4</div>
</div>
- 网格线:构成网格结构的水平和垂直分割线就是网格线;eg: 下图中有 4 条行网格线和 4 条列网格线
![image-20230115192715315](picture/17.%20grid/image-20230115192715315.png)
- 网格轨道:两条相邻的网格线之间的区域就是网格轨道
![image-20230115192818877](picture/17.%20grid/image-20230115192818877.png)
- 网格单元:两条相邻的列网格线和两条相邻的行网格线围起来的就是网格单元
![image-20230115192939420](picture/17.%20grid/image-20230115192939420.png)
注意事项
- 设置
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: <align-content> <justify-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: <align-items> <justify-items>;
单个项目的内容的对齐方式 *
以下属性需要设置在指定的网格项中
justify-self
justify-self
用于设置当前网格项的内容在水平方向上的对齐方式:
start
end
center
stretch
(默认)
align-self
align-self
用于设置当前网格项的内容在垂直方向上的对齐方式:
start
end
center
stretch
(默认)
place-self
place-self
为 justify-self
& align-self
的复合写法:
place-self: <align-self> <justify-self>;
项目的位置 & 合并 *
以下属性需要设置在指定网格项上,控制项目的位置以及大小
grid-column
grid-column
用于合并列:
grid-column-start: 网格线的序数 / 网格线的名字; /* 左边框所在的垂直网格线 */
grid-column-end: 网格线的序数 / 网格线的名字; /* 右边框所在的垂直网格线 */
grid-column: <start-line> / <end-line>; /* 合并写法,第一个数:左边序号;第二个数:右边序号 */
grid-row
grid-row
用于合并行:
grid-row-start: 网格线的序数 / 网格线的名字; /* 上边框所在的水平网格线 */
grid-row-end: 网格线的序数 / 网格线的名字; /* 下边框所在的水平网格线 */
grid-row: <start-line> / <end-line>; /* 合并写法 */
实例
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: <start-line> / <end-line> / <start-line> / <end-line>;
定义网格模板
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-columns
grid-auto-rows
来指定网格轨道的大小
.container {
display: grid;
grid-auto-columns: 100px;
grid-auto-rows: 80px;
}
上例就指定了网格轨道的宽度为 100px,高度为 80px
标题后面带
*
号的,表示该属性需要给网格项设置