Css 网格布局 grid-template-areas

`grid-template-areas`属性是CSS网格布局中用于定义网格模板的属性。它允许我们通过指定网格区域的名称来创建一个网格模板，从而更轻松地布局网格项。以下是一个例子：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

在这个例子中，我们定义了一个包含3行和3列的网格，其中第一行是标题，第二行是主要内容和侧边栏，第三行是页脚。我们使用`grid-template-areas`属性来指定每个网格区域的名称，并将它们放在一个网格模板中。然后，我们使用`grid-area`属性将每个网格项放置在相应的网格区域中。