📅 最后修改于: 2023-12-03 14:40:18.473000 🧑 作者: Mango
CSS 的 grid-template-areas 属性用于定义网格布局的单元格（cell）和单元格跨越（span）关系，通过简单的语法，可以为网格容器中的单元格分配名称并确定其位置。
grid-template-areas:
"name1 name2 name3" /* 第一行的单元格名称 */
"name4 name5 name6" /* 第二行的单元格名称 */
"name7 name8 name9"; /* 第三行的单元格名称 */
grid-template-areas 属性接受一个字符串类型的值，其中每行代表一行网格单元格。每一行再用引号括起来，单元格名称用空格隔开，如果需要使用一个单元格跨越多个单元格的话，使用“.” 填充单元格名称否则会被其他单元格填充。
例如：
grid-template-areas:
"header header header"
"main main side"
"footer footer footer";
上述代码创建了一个 3 行 3 列的网格布局，每个单元格都有一个名称。main 单元格需要跨越第二行第一列和第二列，因此在对应的单元格填充处加上多余的“.”，表示对应位置的单元格没有名称。
在实例中，我们创建了一个简单的网页布局，其中的网格布局使用 grid-template-areas 进行了定义。在代码中我们可以看到，根据不同的设备尺寸，网页布局也会自动调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.title {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
font-size: 1.5rem;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
padding: 20px;
font-size: 1.2rem;
}
.content {
grid-area: content;
background-color: #eee;
padding: 20px;
font-size: 1.2rem;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 768px) {
.grid-container {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
}
}
</style>
<title>grid-template-areas 属性实例</title>
</head>
<body>
<div class="grid-container">
<div class="title">网页标题</div>
<div class="sidebar">侧边栏</div>
<div class="content">网页内容</div>
<div class="footer">版权信息</div>
</div>
</body>
</html>
以下是 grid-template-areas 属性常用的参数值和作用：
| 值 | 作用 | | -------- | ------------------------------------------------------------ | | none | 默认值，表示网格不使用命名区域，即所有单元格都没有名称，使用起始位置和跨度来布局。 | | 区域名称 | 用引号括起来的区域名称，可以在多个单元格共用的情况下使用点号“.”填充单元格名称，表示该单元格没有名称。 | | inherit | 从父元素继承 grid-template-areas 属性的值。 | | initial | 表示将 grid-template-areas 属性值设置为默认值。 | | unset | 表示不设置 grid-template-areas 属性值，继承或使用默认值。 |
该属性还有一些其他的参数值可以查看 CSS 规范进行学习。
CSS 的 grid-template-areas 属性使网格布局的编写变得更加容易，通过为各单元格命名和确定位置，使网页的开发和布局更加清晰、简洁，并且可以根据不同的设备尺寸，自动调整布局，提高用户体验和开发效率。