Grid布局 项目属性

容器的基础代码

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;包含了以下的信息

非划分区域用法：

.box div:nth-child(1) {
    grid-area: 1 / 2 / 3 / 4;
}

所以项目的范围是：行：[1, 3)，列: [2, 4)，也就是1、2行，2、3列。

参考链接：

• CSS Grid 网格布局教程
• MDN