CSS Grid 布局完全指南3-网格项(Grid Items)
上一篇，介绍了grid的网格容器属性，接下来继续介绍grid的网格项 属性。
网格项(Grid Items) 属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
子元素 网格项(Grid Items) 属性
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通过指定 网格线(grid lines) 来确定网格内 网格项(grid item) 的位置。 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
}
网格项位置，grid-column-start，grid-column-end，grid-row-start，grid-row-end 的示例
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2
grid-row-end: span 2
}
网格项位置，grid-column-start，grid-column-end，grid-row-start，grid-row-end 的示例
如果没有声明指定 grid-column-end / grid-row-end，默认情况下，该网格项将占据1个轨道。
项目可以相互重叠。您可以使用 z-index 来控制它们的重叠顺序。
grid-column / grid-row
分别为 grid-column-start+ grid-column-end 和 grid-row-start + grid-row-end的缩写形式。
值：
- <start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度
.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>：你所选的名称
- <row-start> / <column-start> / <row-end> / <column-end>：数字或分隔线名称
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
示例：
作为为网格项分配名称的一种方法：
.item-d {
grid-area: header
}
作为grid-row-start + grid-column-start + grid-row-end + grid-column-end属性的缩写形式
.item-d {
grid-area: 1 / col4-start / last-line / 6
}
网格区域
justify-self
沿着 行轴线(row axis) 对齐 网格项 内的内容（ 相反的属性是 align-self，沿着列轴线(column axis)对齐）。此值适用于单个网格项内的内容。
值：
- start：将内容对齐到网格区域的左侧
- end：将内容对齐到网格区域的右侧
- center：将内容对齐到网格区域的中间（水平居中）
- stretch：填充整个网格区域的宽度（这是默认值）
示例：
.item-a {
justify-self: start;
}
左对齐，将 justify-self 设置为 start 的例子
.item-a {
justify-self: end;
}
右对齐，将 justify-self 设置为 end 的例子
.item-a {
justify-self: center;
}
水平居中对齐，将 justify-self 设置为 center 的例子
.item-a {
justify-self: stretch;
}
填充宽度，将 justify-self 设置为 stretch 的例子
要为网格中的所有网格项设置 行轴线(row axis) 线上对齐方式，也可以在 网格容器 上设置 justify-items属性。
align-self
沿着 列轴线(column axis) 对齐 网格项 内的内容（ 相反的属性是 justify-self ，沿着 行轴线(row axis) 对齐）。此值适用于单个网格项内的内容。
值：
- start：将内容对齐到网格区域的顶部
- end：将内容对齐到网格区域的底部
- center：将内容对齐到网格区域的中间（垂直居中）
- stretch：填充整个网格区域的高度（这是默认值）
.item{
align-self: start | end | center | stretch;
}
示例：
.item-a {
align-self: start;
}
顶部对齐，将 align-self 设置为 start 的例子
.item-a {
align-self: end;
}
</pre>
底部对齐，将 align-self 设置为 end 的例子
.item-a {
align-self: center;
}
垂直居中对齐，将 align-self 设置为 center 的例子
.item-a {
align-self: stretch;
}
填充高度，将 align-self 设置为 stretch 的例子
要为网格中的所有网格项设置 列轴线(column axis) 上的对齐方式，也可以在 网格容器 上设置 align-items属性。
(完)
