Grid 的完整介绍（三）

接着上篇 blog，这篇继续介绍 Grid 的网格子项属性，内容没有那么长了。

原文地址见这里：A Complete Guide to Grid。

网格子项的属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self

grid-column-start

grid-column-end

grid-row-start

grid-row-end

通过参考指定的网格线来决定网格中一个网格子项的位置，grid-column-start/grid-row-start是指网格子项开始的线，grid-column-end/grid-row-end是指网格子项结束的线。

值有：

<line> - 可以是一个数字以适用被标记了数字号的网格线，或者是一个名字以适用命名了的网格线
span <number> - 子项将跨越指定数字的网格轨迹
span <name> - 子项将跨越到指定名字之前的网格线
auto - 表示自动布局，自动跨越或者默认跨越一个

.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
}

举个例子：

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

.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-start + grid-column-end，和grid-row-start + grid-row-end的简写，分别独立。

值有：

/ - 每一个属性都可以接收普通模式的值，包括span

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

举例：

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

如果没有声明结束网格线的值，那么网格子项将默认跨越 1 个网格轨迹。

grid-area

给网格子项取一个名字以让它被由grid-template-areas属性创建的模板引用。同时，这个属性也可以用来更简短地表示grid-row-start+ grid-column-start + grid-row-end+ grid-column-end。

值有：

<name> - 一个你选择的名字
/ / / - 可以是网格线的数字或名字

1
2
3

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

举例：

作为分配一个名字给网格子项的一种方式：

.item{
.item-d{
  grid-area: header
}

作为grid-row-start+ grid-column-start + grid-row-end+ grid-column-end的一种简写：

1
2
3

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

justify-self

让网格子项的内容以列轴对齐（与之相反align-self是跟行轴对齐），这个值可以应用在单个网格子项的内容中。

值有：

start - 让内容在网格区域左对齐
end - 让内容在网格区域右对齐
center - 让内容在网格区域中间对齐
stretch - 填充着呢个网络区域的宽度（默认值）

1
2
3

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

举例：

1
2
3

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

1
2
3

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

1
2
3

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

1
2
3

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

为了让网格中的所有子项都对齐，这个行为也可以通过设置网格容器中的justify-items属性来实现。

align-self

让网格子项的内容以行轴对齐（与之相反justify-self是跟列轴对齐），这个值可以应用在单个网格子项的内容中。

值有：

start - 让内容在网格区域上对齐
end - 让内容在网格区域下对齐
center - 让内容在网格区域中间对齐
stretch - 填充着呢个网络区域的高度（默认值）

1
2
3

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

举例：

1
2
3

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

1
2
3

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

1
2
3

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

1
2
3

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

为了让网格中的所有子项都对齐，这个行为也可以通过设置网格容器中的align-items属性来实现。

Hacker and Geeker's Way