手册
目录
收藏939
分享
阅读1042
更新时间2025-07-16
如需使 HTML 元素充当网格容器,您必须把 display 属性设置为 grid 或 inline-grid。
网格容器由放置在列和行内的网格项目组成。
grid-template-columns 属性定义网格布局中的列数,并可定义每列的宽度。
该值是以空格分隔的列表,其中每个值定义相应列的长度。
如果您希望网格布局包含 4 列,请指定这 4 列的宽度;如果所有列都应当有相同的宽度,则设置为 "auto"。
生成包含四列的网格:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
注意:如果在 4 列网格中有 4 个以上的项目,则网格会自动添加新行并将这些项目放入其中。
grid-template-columns 属性还可以用于指定列的尺寸(宽度)。
设置这 4 列的尺寸:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
grid-template-rows 属性定义每列的高度。
它的值是以空格分隔的列表,其中每个值定义相应行的高度:
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
justify-content 属性用于在容器内对齐整个网格。
注意:网格的总宽度必须小于容器的宽度,这样 justify-content 属性才能生效。
.grid-container {
display: grid;
justify-content: space-evenly;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
justify-content: space-around;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
justify-content: space-between;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
justify-content: center;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
justify-content: start;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
justify-content: end;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
align-content 属性用于垂直对齐容器内的整个网格。
注意:网格的总高度必须小于容器的高度,这样 align-content 属性才能生效。
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习