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 屬性）進行定位。
