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
}