CSS grid-area 是一个简写属性，它定义网格布局中网格项的位置和大小。网格区域是通过使用 grid-template-areas 属性在网格容器内定义命名网格区域来创建的。
grid-area 属性是以下各个网格相关属性的简写:
auto: 它自动确定网格项目在网格布局中的位置或默认为 1 的跨度。
<custom-ident>: 如果有一条线标记为 <custom-ident>-start 或 <custom-ident>-end，则网格项将沿着该线定位。
<integer> && <custom-ident>？ − 如果给出了名称，则仅考虑具有该名称的行。如果具有该名称的线不足，则所有网格线都会按具有该名称的方式进行处理，以确定正确的位置。 <integer> 值为 0 无效。
span && [ <integer> || <custom-ident> ]: 当名称被指定为自定义标识时，仅考虑具有该名称的行。如果具有该名称的线不足，我们会考虑网格相关侧的所有网格线都具有该名称以进行计数。如果未指定 <integer>，则默认值为 1。不允许使用负数或 0。
当命名网格时使用区域时，会自动生成隐式命名行。如果您使用 grid-area: fooarea;，则网格项将放置在名为 fooarea 的网格区域的开头或结尾，除非您已经为 fooarea 的开头或结尾定义了特定行。
适用范围
网格项和绝对定位的框，其包含块是网格容器。
DOM 语法
object.style.gridArea = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]"; 要记住的点
当指定了四个网格区域值，行和列的起始和结束位置由 grid-row-start ，grid-column-start，grid-row-end 和 grid-column-end 确定。
如果未指定grid-column-end，则当grid-column-start 为 <custom-ident> 时，grid-column-end 将设置为 auto .
如果未指定grid-row-end，则 grid-row-end 将设置为 auto， 除非 grid-row-start 是一个 <custom-ident>。
如果未指定grid-column-start ，则grid-row-start 设置为 <custom-ident>，并且所有四个普通写法都分配给该值。 否则，将设置自动值。
网格区域可以设置为 <custom-ident> 作为区域名称，使得 grid-template-areas 放置更容易。
CSS grid-area: auto 值
以下示例演示了 grid-area: auto 属性自动确定此网格项在网格中可用空间上的位置 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
grid-gap: 10px;
}
.grid-container > div {
background-color: red;
color: white;
padding: 10px;
text-align: center;
}
.grid-item {
grid-area: auto;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div class="grid-item">Grid Auto Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Item 6</div>
</div>
</body>
</html> CSS grid-area: <custom-ident>
网格布局具有三行四列，名为 row1、row2、row3 和 col1、col2、col3、col4、col5。
下面的例子演示了 grid-area: row1 /third / row3 /last;属性中，第二个网格项跨越第一行和第三行之间的网格区域，从名称为 col3 的列开始到名称为 col5 的列 -
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: [row1] 50px [row2] 50px [row3] 50px;
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
gap: 10px;
background-color: lightgreen;
padding: 5px;
}
.grid-container > div {
background-color: red;
padding: 10px;
text-align: center;
}
.grid-item {
grid-area: row1 / col3 / row3 / col5;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div>Grid Item 8</div>
</div>
</body>
</html> CSS grid-area: <integer> && <custom- ident>？
网格布局有五行四列（p、q 和 m、n）。
以下示例演示 grid-area: 2 q / 1 n / 4q/3n；: 这里第二个网格项从第二行 (q) 开始，从第一列 (n) 跨越到第三列 (n)。 −
下图演示了带有线条的网格布局:
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: [p] 50px [q] 50px [q] 50px [q] 50px [q];
grid-template-columns: [m] 200px [n] 200px [n] 200px [n];
gap: 10px;
background-color: lightgreen;
padding: 5px;
}
.grid-container > div {
background-color: red;
padding: 10px;
text-align: center;
}
.grid-item {
grid-area: 2 q/ 1 n / 4 q / 3 n;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div>Grid Item 8</div>
</div>
</body>
</html> CSS grid- area: span
下面的例子演示了grid-area: 2 / 2 / span 2 / span 2属性，第二个网格项从第二行第二列开始，跨越两行两列-
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template: auto auto;
color: white;
text-align: center;
width: 300px;
background-color: lightgreen;
}
.grid-container > div {
background-color: red;
border: 2px solid lightgreen;
padding: 10px;
}
.grid-item2 {
grid-area: 2 / 2 / span 2 / span 2;
}
</style>
</head>
<body>
<div class="grid-container">
<div>Grid item 1</div>
<div class="grid-item2">Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
</body>
</html>