Grid布局 容器属性(二)
基础代码
HTML(box的子元素可能会增加、减少)
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.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设置列间距。
grid-template-columns: repeat(3, 1fr);
row-gap: 10px;
column-gap: 20px;
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-around;
space-between:
justify-content: space-between;
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：真正内容的大小，不会拉伸。
参考链接：
-
CSS Grid 网格布局教程[1] -
MDN
参考资料
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
原文始发于微信公众号（赤蓝紫）：Grid布局 容器属性(二)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/45103.html
