Grid布局 容器属性(二)
Grid布局 容器属性(二)
基础代码
HTML(box的子元素可能会增加、减少)
<div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>CSS
.box { width: 300px; height: 300px;}.box div:nth-child(odd) { background-color: pink;}.box div:nth-child(even) { background-color: purple;}row-gap、column-gap属性
row-gap设置行间距，column-gap设置列间距。
.box { width: 300px; height: 300px;}.box div:nth-child(odd) { background-color: pink;}.box div:nth-child(even) { background-color: purple;}
gap属性
gap属性是row-gap和column-gap的简写形式。
gap: <row-gap> <column-gap>;gap: 10px 20px;结果和上图一样。
如果只有一个值，那么行间距、列间距都是该值。
gap: 20px;
grid-auto-flow属性
grid-auto-flow属性指定在网格中被自动布局的元素怎样排列。默认值是row，即先行后列。
grid-template-rows: 50% 50%;grid-template-columns: repeat(3, 1fr);grid-auto-flow: row; /* 这里有没有都是一样的结果 */
设置成column的话，就会按先列后行的顺序来排列。
grid-template-rows: 50% 50%;grid-template-columns: repeat(3, 1fr);grid-auto-flow: column;
下面还需要讲一下设置row或column的同时添加dense的情况。加了dense表示尽可能紧密填满。
grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);grid-auto-flow: row;.box div:nth-child(3) { /* 后续将项目属性时会细讲。 */ /* auto: 表示该项目对网格项目没有任何贡献。实际没有它也行。暂时找不到必须要的理由 */ /* span: 表示跨越，即占多少个格 */ grid-column: auto / span 2;}
如果需要紧密填满的话，只需要将grid-auto-flow属性变成row dense即可。之后4就会往上移，补空位，5、6也依次补上去。
单元格内容排列
和单元格排列有关的主要有两个属性。
justify-items：设置单元格内容的水平位置align-items：设置单元格内容的垂直位置
它们的取值都是一样的：
start: 对齐单元格的起点end: 对齐单元格的终点center：单元格内容居中stretch: 拉伸占满单元格(默认值)
justify-items属性
上面已经简单介绍过了，其实和flex的差不太多，接下来来一下实例加深一下印象。
box元素的CSS基础代码加一下下面的内容。(方便体验)
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, 20%);background-color: skyblue;
stretch: 效果和上图一样。因为默认值就是stretch
justify-items: stretch;**start**：
justify-items: start;
注意：不再是stretch之后，单元格内容的大小就不会是单元格本身的大小了，而是真正内容的大小。例如，上面的例子中，没有设置宽度，真正内容大小就是文字的大小。
**end**：
justify-items: end;
**center**：
justify-items: center;
align-items属性
start:
align-items: start;
end:
align-items: end;
center:
align-items: center;
place-items属性
place-items属性是align-items和justify-items的简写形式。
语法：
place-items: <align-items> <justify-items>;示例：
place-items: start center;
水平方向居上，垂直方向居中。
需要水平垂直居中只需要值都设置为center即可，如果省略第二个值，则第二个值会等于第一个值。也就是说水平垂直居中只需要place-items: center;即可。
整体内容排列
box元素的CSS基础代码还是要加一下下面的内容。(方便体验)
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, 20%);background-color: skyblue;
和单元格排列有关的主要有两个属性。
justify-content：设置整体内容的水平位置align-items：设置整体内容的垂直位置
它们的取值都是一样的：
start、end、center、stretch和单元格排列部分的一样，只是对齐的不再是单元格，而是容器了。space-around：每个项目两侧的间隔相等，项目之间的间隔会比容器边框的间隔大一倍。space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔space-evenly：项目与项目、项目与容器边框之间的间隔都相等。
justify-content属性
简单举几个实例，基本看看结果+看看概念就懂了(真正懂需要开发时经常使用)
center:
justify-content: center;
space-around:
justify-content: space-between;
space-between:
justify-content: space-evenly;
space-evenly:
justify-content: space-evenly;
align-content属性
和justify-content属性一样，只是从水平方向变成了垂直方向。
place-content属性
place-content属性是align-content和justify-content的简写形式。
语法：
place-content: <align-content> <justify-content>;示例：
place-content: space-between center;
start和stretch的区别
用上面的例子测试，如果使用start和stretch,会发现它们的结果一样。
这是因为我们的项目大小已经固定好了，如果变成auto的话，就能看出start和stretch的区别了。
stretch: 会拉伸占满容器
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, auto);justify-content: stretch;
start：真正内容的大小，不会拉伸。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-07-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
