Web 前端 - CSS - Grid 网格布局及通用PC端布局实战
[toc]
一、概述序号
属性
描述
1
解释
网格布局是一个二维的基于网格的布局系统
2
特点
由水平(行)和垂直(列)线集合创建的一个模式,我们可以根据这个模式排列我们的设计元素
3
场景
和flex配合能够快速布局复杂的页面,使用媒体查询重新排列网格变得非常容易,同时gird布局比其他布局方式所需的代码量少很多
二、网格容器网格容器:应用 display: grid 的元素。这是所有网格项的直接父级元素
网格项:网格容器的直接子元素,也叫项目
网格线:构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lines)”),也可以是水平的(“行网格线(row grid lines)”),并位于行或列的任一侧
网格轨道:两条相邻网格线之间的空间。你可以把它们想象成网格的列或行
1. 属性序号
属性
描述
格式
1
grid-template-columns
显式定义列及单元格的宽度
grid-template-columns: [line_name] cell_width_1 [line_name] cell_width_2 [line_name] cell_width_3;
2
grid-template-rows
显式定义行及单元格的高度
grid-template-rows: [line_name] cell_height_1 [line_name] cell_height_2 [line_name] cell_height_3;
3
grid-auto-columns
隐式定义列及单元格的宽度,当项目多于单元格时就会创建隐式单元格
grid-auto-columns: cell_height_1 cell_height_2 cell_height_3;
4
grid-auto-rows
隐式定义行及单元格的高度,当项目多于单元格时就会创建隐式单元格
grid-auto-rows: cell_height_1 cell_height_2 cell_height_3;
5
grid-auto-flow
设置项目在单元格中的排列方式
6
justify-content
设置单元格在容器横轴(行)上的对齐方式
7
align-content
设置单元格在容器纵轴(列)上的对齐方式
8
place-content
justify-content和align-content属性的简写
9
justify-items
设置项目在单元格横轴(行)上的对齐方式
10
align-items
设置项目在单元格纵轴(列)上的对齐方式
11
place-items
justify-items和align-items属性的简写
12
column-gap
设置列间距
13
row-gap
设置行间距
14
gap
column-gap和row-gap属性的简写
2. 值序号
值/单位
描述
适用属性
备注
1
auto
浏览器自动计算
grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
2
px
固定值,像素计
grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
3
%
百分比,按百分比分配
grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
4
fr
比例,按比例分配
grid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rows
5
repeat
重复、分组、弹性、自动填充设置
grid-template-columns、grid-template-rows
重复:grid-template-columns: repeat (n, cell_height_1 cell_height_2 cell_height_3),n代表重复的次数,cell_height代表单元格的宽度
6
row
默认值。水平(行)方向,顺序为从左往右
grid-auto-flow
7
column
垂直(列)方向,顺序为从上往下
grid-auto-flow
8
start
默认值。左侧起始线对齐
justify-content
9
end
右侧终止线对齐
justify-content
10
center
居中对齐
justify-content
11
stretch
填充满整个网格容器的宽度
justify-content
12
space-evenly
平均对齐。剩余空间在每个单元格之间平均分配
justify-content
13
space-around
分散对齐。剩余空间在每个单元格两侧平均分配
justify-content
14
space-between
两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配
justify-content
15
start
默认值。顶部起始线对齐
align-content
16
end
底部终止线对齐
align-content
17
center
居中对齐
align-content
18
stretch
填充满整个网格容器的高度
align-content
19
space-evenly
平均对齐。剩余空间在每个单元格之间平均分配
align-content
20
space-around
分散对齐。剩余空间在每个单元格两侧平均分配
align-content
21
space-between
两端对齐。剩余空间在头尾单元格之外的子元素之间平均分配
align-content
22
start
默认值。单元格左侧起始线对齐
justify-items
23
end
单元格右侧终止线对齐
justify-items
24
center
居中对齐
justify-items
25
stretch
填满单元格的宽度
justify-items
26
start
默认值。单元格顶部起始线对齐
align-items
27
end
单元格底部终止线对齐
align-items
28
center
居中对齐
align-items
29
stretch
填满单元格的高度
align-items
三、网格单元格网格单元格:两个相邻的行和两个相邻的列网格线之间的空间,这是构成网格系统的一个基本单元
1. 属性序号
属性
描述
格式
1
grid-column-start
引用列网格线划分单元格跨度,单元格开始的列网格线
`grid-column-start: n
span n
line_name
auto`
2
grid-column-end
引用列网格线划分单元格跨度,单元格结束的列网格线
`grid-column-end: n
span n
line_name
auto`
3
grid-row-start
引用行网格线划分单元格跨度,单元格开始的行网格线
`grid-row-start: n
span n
line_name
auto`
4
grid-row-end
引用行网格线划分单元格跨度,单元格结束的行网格线
`grid-row-end: n
span n
line_name
auto`
5
grid-column
grid-column-start和grid-column-end属性的简写
`grid-column: satrt-line / end-line
satrt-line / span n`
6
grid-row
grid-row-start和grid-row-end属性的简写
`grid-row: satrt-line / end-line
satrt-line / span n`
7
justify-self
设置某项目在单元格横轴(行)上的对齐方式
8
align-self
设置某项目在单元格纵轴(列)上的对齐方式
9
place-self
justify-items和align-items属性的简写
2. 值序号
值
描述
适用属性
1
start
默认值。单元格左侧起始线对齐
justify-self
2
end
单元格右侧终止线对齐
justify-self
3
center
居中对齐
justify-self
4
stretch
填满单元格的宽度
justify-self
5
start
默认值。单元格顶部起始线对齐
align-self
6
end
单元格底部终止线对齐
align-self
7
center
居中对齐
align-self
8
stretch
填满单元格的高度
align-self
四、网格区域网格区域:由网格单元格组成的矩形块,一个网格区域可以由任意数量的网格单元格组成
属性序号
属性
描述
格式
适用
1
grid-template-areas
通过引用grid-area属性指定的网格区域名称来定义网格模板
`grid-template-areas: grid-area_name
.
none`
容器
2
grid-area
为项目提供一个名称,以便可以被使用网格容器 grid-template-areas 属性创建的模板进行引用,或者直接划分单元格跨度
`grid-area: item_name
grid-row-start / grid-column-start / grid-row-end / grid-column-end`
项目
五、代码实例
1. 使用固定值、百分比、比例、auto、repeat重复、分组、弹性和自动填充设置显式地划分行和列
1.1 使用固定值显式地划分行和列
Document.box{
width:400px;
height:400px;
background-color:lightblue;
display:grid;
grid-template-columns:100px100px100px;
grid-template-rows:100px100px100px;
}
span{
background-color:lightcoral;
}
1
2
3
4
5
6
7
8
9