Grid布局 项目属性
source link: https://www.clzczh.top/2022/07/05/grid-3/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Grid布局 项目属性
容器的基础代码
<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列。
参考链接:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK