HTML
<div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></div>
CSS
.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;
包含了以下的信息
非划分区域用法:
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
所以项目的范围是:行:[1, 3),列: [2, 4),也就是1、2行,2、3列。