命名区域

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 33 课，共 43 课。

你可以使用 grid-template-areas 属性为网格的各个部分命名，而不是通过行号放置项目。这种方法非常适合创建整洁、易读的布局，尤其是在处理页眉、侧边栏和页脚等多个部分时。看看下面的示例：

我们使用 CSS Grid 定义一个容器，并使用 grid-template-areas 创建命名布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

每行文本都会形成一行，行中的每个单词都是网格的一部分。重复某个单词，该区域就会占据更大的空间。

然后，像这样将 HTML 元素与这些名称对应起来：

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

挑战

简单

按照下图所示的区域，为基本网页创建 CSS 网格布局：

为 .container 选择器设置以下属性：

将 display 设为 grid
将 grid-template-columns 设为 1fr 3fr
将 grid-template-rows 设为 auto 1fr auto
将 grid-template-areas 设为：
"header header"
"profile main"
"footer footer"

将每个元素分配到对应的区域。例如，为 .header 设置 grid-area 为 header。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>