CSS 属性

CSS 属性 grid-template-areas 定义网格内的命名部分，概述单元格的排列并用特定名称标识它们。

这些部分并不专门链接到各个网格元素，而是可以通过网格放置属性 grid-row-start、grid-row-end，grid-column-start，grid-row、grid-column 和 grid-area.

可能的值

  • 网格容器不包含任何命名的网格区域。

  • 为列出的每个唯一字符串创建一行，而每个字符串的单元格形成单独的列。

    如果多行中的多个单元格标记具有相同的名称，则它们是组合成一个跨越这些特定网格单元的单一命名网格区域。

    但是，如果这些单元没有形成矩形形状，则声明无效。

语法

grid-template-areas: none | <string> ;

适用范围

网格容器。

CSS grid-template-areas: 命名区域

下面的示例演示了使用 grid-template-areas 定义命名区域。

  • 在给出的示例中，grid-template-areas 属性通过分配命名来定义布局结构区域到某些网格单元。

  • 属性值中的每个字符串代表一行，用空格分隔的各个字符串指定列。

  • 通过为这些区域指定名称，可以组织网格布局，以便可以将内容相应地放置在每个命名部分中。

<html>
<head>
<style>
   /* 定义网格容器的样式 */
   .grid-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* 五列等宽 */
      grid-template-rows: 100px 200px 150px 100px; /* 四排不同高度 */
      grid-template-areas:
      "header header header main extra"
      "sidebar content content main extra"
      "sidebar content content main extra"
      "footer footer footer main extra";
      gap: 10px;
      font-size: 1.5em;
      height: 600px; /* 设置固定高度进行演示 */
      border: 1px solid #ccc;
      padding: 10px;
   }
   /* 定义网格项的样式 */
   .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .sidebar {
      grid-area: sidebar;
      background-color: #2ecc71;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .content {
      grid-area: content;
      background-color: #e74c3c;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .footer {
      grid-area: footer;
      background-color: #f39c12;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .main {
      grid-area: main;
      background-color: #9b59b6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .extra {
      grid-area: extra;
      background-color: #34495e;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
      <div class="main">Main</div>
      <div class="extra">Extra</div>
   </div>
</body>
</html>

CSS grid- template-areas: 网页布局

在以下示例中，grid-template-areas 属性为每个布局段定义命名网格区域。

grid-template-areas 分配标头、文章、导航、广告和页脚在网格内，形成有组织的网页布局。

<html>
<head>
<style>
   body { 
      display: grid;
      grid-template-areas: 
         "header header header"
         "nav article article"
         "ads ads footer";
      grid-template-rows: 80px 1fr 70px;  
      grid-template-columns: 20% 1fr 15%;
      grid-gap: 10px;
      height: 100vh;
      margin: 0;
      font-size:20px;
   }
   header, footer, article, nav, div {
      padding: 20px;
      background: #3498DB; 
      color: #fff; 
   }
   #pageHeader {
      grid-area: header;
   }
   #pageFooter {
      grid-area: footer;
   }
   #mainArticle { 
      grid-area: article;      
   }
   #mainNav { 
      grid-area: nav; 
   }
   #siteAds { 
      grid-area: ads; 
   }
</style>
</head>
<body>
<header id="pageHeader">Custom Header</header>
<article id="mainArticle">Main Content</article>
<nav id="mainNav">Navigation</nav>
<div id="siteAds">Advertisement</div>
<footer id="pageFooter">Custom Footer</footer>
</body>
</html>