Grid布局 项目属性
容器的基础代码
HTML
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.box {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
.box div:nth-child(odd) {
background-color: pink;
}
.box div:nth-child(even) {
background-color: purple;
}
.box div {
border: 1px solid red;
}
项目属性
grid-row系列属性
一共有三个：
-
grid-row-start属性：上边框所在的水平网格线 -
grid-row-end属性：下边框所在的水平网格线 -
grid-row属性：grid-row-start和grid-row-end的简写形式。grid-row: <start-line> / <end-line>;
说的有点玄玄的，实际体验更清晰。
.box div:nth-child(1) {
grid-row-start: 1;
grid-row-end: 3;
}
上面意思就是第一根水平网格线到第三根网格线的部分都是该项目的。其实也可以用数学的取值区间来解释：[1, 3)取第一行到第三行的部分，包含第一行，但不包含第三行。
上面的代码也可以使用grid-row属性来实现。
grid-row: 1 / 3;
属性值还可以使用span关键字，表示跨越多少个网格
如grid-row: 1 / span 3;
grid-column系列属性
一共有三个：
-
grid-column-start属性：左边框所在的垂直网格线 -
grid-column-end属性：右边框所在的垂直网格线 -
grid-column属性：grid-column-start和grid-column-end的简写形式。
和grid-row系列基本一样，只是换一下方向而已。
grid-row: 1 / span 2;
grid-column: 1/ span 2;
排列属性
项目的排列属性有三个：
-
justify-self: 设置单元格内容的水平位置，跟justify-items属性用法一样，只作用于单个项目 -
align-self: 设置单元格内容的垂直位置，跟align-items属性用法一样，只作用于单个项目 -
place-self:justify-self和align-self的简写形式，跟place-items属性用法一样，只作用于单个项目
.box div:nth-child(1) {
justify-self: center;
align-self: center;
/* 或 */
/* place-self: center; */
}
grid-area属性
之前讲解容器属性时，已经使用过grid-template-areas和grid-area来划分区域了。
.box {
display: grid;
width: 300px;
height: 300px;
grid-template-areas:
"header header header"
"nav main main";
}
.box div:nth-child(1) {
grid-area: header;
background-color: skyblue;
}
.box div:nth-child(2) {
grid-area: nav;
background-color: purple;
}
.box div:nth-child(3) {
grid-area: main;
background-color: pink;
}
实际上，grid-area是grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写。
语法：
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
上面例子中grid-area其实也是可以拆分的。
之前也有讲过，划分区域划分有两大原则：
-
不能当墙头草(跨行的同时跨列) -
不能太贪心(同时拿两份不紧贴的)
所以最后划分的区域都一块，而且不能折。
所以其实grid-area: header;包含了以下的信息
非划分区域用法：
.box div:nth-child(1) {
grid-area: 1 / 2 / 3 / 4;
}
所以项目的范围是：行：[1, 3)，列: [2, 4)，也就是1、2行，2、3列。
参考链接：
-
CSS Grid 网格布局教程[1]
参考资料
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/45094.html
