9.1 属性 grid-template-areas
CSS Grid Layout 提供了用命名区域
(grid areas) 来创建复杂布局的强大功能。属性 grid-template-areas 允许定义网格区域，可用于
简化元素的布局。这一特性让开发者可以直观地组织布局，而且维护起来也更轻松。
grid-template-areas 的基本概念
-
定义区域：
- 属性
grid-template-areas允许为网格的不同区域命名 - 每个区域名都代表一个矩形的单元格组
- 属性
-
使用命名区域：
-
可以使用定义好的区域来布局元素，通过为每个元素设置
grid-area属性
-
可以使用定义好的区域来布局元素，通过为每个元素设置
grid-template-areas 的语法：
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"
}
Grid 元素的语法：
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
解释说明：
grid-template-areas的每一行代表网格中的一行- 行中的每个词表示一个单元格或单元格组
- 可以使用点 (.) 来表示空单元格
9.2 grid-template-areas 的使用示例
完整实现例子：
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas 示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
代码说明：
-
.grid-container: 使用display: grid定义 Grid 容器，并使用grid-template-areas设置网格布局。在这个例子中，布局由三行组成：第一行是头部，第二行 包含侧边栏和主内容，第三行是底部 -
.header,.sidebar,.main,.footer: 为不同 的网格区域定义样式，并用grid-area属性将这些区域与grid-template-areas中的名称关联
9.3 管理空区域
属性 grid-template-areas 允许通过使用点 (.) 作为空白符号来保留空区域。
完整实现例子：
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas 的空区域</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
代码解释：
-
.grid-container: 创建一个包含三个区域的 Grid 容器：头部、主要内容和底部。 中间一行在主内容的左侧和右侧包含空区域 -
.header,.main,.footer: 定义区域的样式，并将它们与grid-template-areas中的区域名称关联
GO TO FULL VERSION