本文介绍了如何使用CSS3 Grid布局设置单元格之间的间距，包括行间距`grid-row-gap`和列间距`grid-column-gap`，以及复合写法`grid-gap`。同时详细讲解了子元素排列方向、内容在单元格内的对齐方式、网格在容器中的对齐方式，以及如何通过`grid-template-areas`和`grid-area`指定网格区域分配项目。通过这些属性，可以更精确地控制网页元素的布局。
设置行间距
grid-row-gap: 60px;
表示，行和行之间的间距为60px。
设置列间距
grid-column-gap: 60px;
表示，列和列之间的间距为60px。
复合写法
grid-gap: 20px 50px;
规划子元素排列的方向
grid-auto-flow: column | row;
column表示纵向排列，row表示横向排列，默认使用row
内容在单元格内的对齐方式
水平对齐方式
justify-items: start | end | center | stretch;
-
如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start，因为设置了宽和高以后，stretch将不生效。
start：居左
end：居右
center：居中
stretch：拉伸
垂直对齐方式
align-items: start | end | center | stretch;
- 如果项目没有设置宽和高，默认使用stretch，如果项目设置了宽和高，默认使用start
最低0.47元/天 解锁文章
1659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
