【CSS】了解grid-template-areas属性

grid-template-areas 属性是 CSS Grid 布局中一个非常有用的特性，它允许你通过命名网格区域（grid areas）来直接控制网格项目的布局。这个属性通过引用网格容器内部网格项目的名称来定义网格区域的布局，使得布局的设计更加直观和易于理解。

基本用法

首先，你需要在网格项目的 CSS 规则中通过 grid-area 属性为每个网格项目指定一个名称。然后，在网格容器的 CSS 规则中，使用 grid-template-areas 属性来定义这些网格区域在网格中的布局。

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

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

在上面的例子中，.container 是一个网格容器，它定义了三列和两行。grid-template-areas 属性定义了网格区域的布局，其中 "header header header" 表示第一行有三个等宽的网格区域，每个区域都被命名为 header（尽管这里只有一个 .header 元素，但你可以通过其他方式控制显示，例如使用多个 .header 元素或隐藏某些元素）。第二行 "main main sidebar" 表示有两个 main 网格区域和一个 sidebar 网格区域。

注意事项

• 网格区域的名称（即 grid-area 的值）是自定义的，但必须在 grid-template-areas 属性中准确引用。
• 网格区域的形状由 grid-template-columns 和 grid-template-rows 定义的网格线决定。grid-template-areas 只是提供了网格区域的命名和布局的视觉表示。
• 如果网格项目（grid items）的数量少于 grid-template-areas 中定义的区域数量，那么未引用的区域将不会被创建。
• 如果网格项目没有通过 grid-area 属性指定名称，则它们将不会自动匹配到 grid-template-areas 中定义的任何区域，而是会按照网格容器的默认布局规则进行排列。
• 你可以使用点（.）来表示一个空的网格单元格，这在设计网格布局时非常有用，特别是当你想要为某些网格项目留出空间时。

示例：使用点表示空单元格

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

在这个例子中，第一行的第三个网格单元格是空的（用 . 表示），这意味着该位置不会放置任何网格项目，除非通过其他方式（如网格项目的 grid-column 和 grid-row 属性）进行定位。