grid基础语法介绍(下)

grid基础语法介绍(下)

前一篇文章详细阐述了定义在grid容器上的各项属性，在这一篇文章里，主要是阐述grid布局中定义在网格项目的各项属性。

grid-column-start

grid-column-end

grid-row-start

grid-row-end

grid-column-start定义了网格项目垂直方向的开始位置网格线。
grid-column-end定义了网格项目垂直方向的结束位置网格线。
grid-row-start定义了网格项目水平方向的开始位置网格线。
grid-row-end定义了网格项目水平方向的结束位置网格线。

.item {
    grid-column-start: <number> | <name> | span <number> | span <name> | auto
    grid-column-end: <number> | <name> | span <number> | span <name> | auto
    grid-row-start: <number> | <name> | span <number> | span <name> | auto
    grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

它们的值默认为auto，也可以是网格线的名字，也可以是span加上一条网格线的名称。

<line>表示网格线名称。
span <number>表示子项将跨越指定数字数目的网格轨迹。
span <name>表示子项将跨越到指定名字之前的网格线。
auto表示自动布局，自动跨越或者默认跨越一个。

举个例子：

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}

我们也可以使用span关键字

.item-b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 2
    grid-row-end: span 2
}

注：如果没有显式设置grid-column-end/grid-row-end，网格子项将默认跨越一个网格单元。此外，网格子项可以互相重叠，你可以使用z-index来控制他们的层叠顺序。

grid-column

grid-row

grid-column与grid-row表示grid-column-start + grid-column-end，和grid-row-start + grid-row-end的简写形式。

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

它的值设置为<start-line> / <end-line>，它们同样可以传入span。

.item-c {
    grid-column: 3 / span 2;
    grid-row: third-line / 4;
}

grid-area

grid-area调用grid-template-areas属性创建的模板。同时，这个属性也可以是grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的缩写。

.item {
    grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

注意它的参数的顺序为：<row-start> / <column-start> / <row-end> / <column-end>。

在上一篇文章的grid-template-areas中已经详细讲述通过调用grid-template-areas属性创建的模板的用法，详情可见
grid-template-areas demo

它也可以作为grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的缩写形式。

.item-d {
    grid-area: 1 / col4-start / last-line / 6
}

justify-self

justify-self定义了该网格单元的内容和列轴对齐方式，即水平方向上的对齐方式。

.box {
    justify-self: start | end | center | stretch;
}

start代表该网格单元和网格区域的左边对齐。
end代表该网格单元和网格区域的右边对齐。
center代表该网格单元和网格区域的中间对齐。
stretch为默认值，代表填充整个网格区域的宽度。

.item-a {
    justify-self: start;
}

.item-a {
    justify-self: end;
}

.item-a {
    justify-self: center;
}

.item-a {
    justify-self: stretch;
}

align-self

类似于justify-self，align-self定义了该网格单元的内容和水平轴对齐方式，即垂直方向上的对齐方式。

.box {
    align-self: start | end | center | stretch;
}

start代表该网格单元和网格区域的上边对齐。
end代表该网格单元和网格区域的下边对齐。
center代表该网格单元和网格区域的中间对齐。
stretch为默认值，代表填充整个网格区域的高度。

.item-a {
    align-self: start;
}

.item-a {
    align-self: end;
}

.item-a {
    align-self: center;
}

.item-a {
    align-self: stretch;
}

参考资料：

grid基础语法介绍(项目篇)