CSS - grid-template-areas 属性

CSS grid-template-areas 属性定义了网格中命名的区域，这些区域概述了单元格的排列并用特定名称标识它们。然后，网格的元素可以使用这些名称通过 grid-area 属性引用特定区域。

语法

grid-template-areas: none | item-names;

属性值

值	描述
none	它指定网格布局中没有命名区域。
item-names	它是一个包含区域名称的字符串序列，用于指定行和列的大小。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格模板区域属性示例

以下示例解释了具有不同值的 grid-template-areas 属性。

使用 none 值的网格模板区域属性

为了在网格布局中不包含任何命名区域，并且项目以其自然流程显示，我们使用 none 值。项目的大小取决于其内容。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightgrey;
         grid-gap: 10px;
         padding: 20px;
      }

      .container > div 
         padding: 20px;
         text-align: center;
         color: white;
         border: 3px solid blue;
         background-color: #4775d1;
         grid-template-areas: none;
   </style>
</head>

<body>
   <h2>
      CSS grid-template-areas property
   </h2>
   <h4>
      grid-template-areas: none
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

使用命名区域的网格模板区域属性

为了在网格布局中具有特定的命名区域，我们将包含区域名称的字符串序列指定给 grid-template-areas 属性。每个单独的字符串序列表示一行，字符串中的名称数量表示列的数量。必须使用 grid-area 属性来引用该区域。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightgrey;
         grid-gap: 10px;
         padding: 20px;
      }

      .container>div {
         padding: 20px;
         text-align: center;
         color: white;
         border: 3px solid blue;
      }

      .container1 {
         grid-template: 
         'header header header header' 
         'sidebar1 content content sidebar2' 
         'footer footer footer footer';
      }

      .container2 {

         grid-template: 
         '. . . .' 
         '. . item item';
      }

      .container2>div {
         background-color: lightcoral;
      }

      .cont1-item1 {
         background-color: #05445e;
         grid-area: header;
      }

      .cont1-item2 {
         background-color: #75e6da;
         grid-area: sidebar1;
      }

      .cont1-item3 {
         background-color: #189ab4;
         grid-area: content;
      }

      .cont1-item4 {
         background-color: #8bcd50;
         grid-area: footer;
      }

      .cont1-item5 {
         background-color: #75e6da;
         grid-area: sidebar2;
      }

      .cont2-item1 {
         grid-area: item;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-areas property
   </h2>
   <p>
      <strong>
      grid-template-areas: 'header header header header'
      'sidebar1 content content sidebar2' 
      'footer footer footer footer'
      </strong> 
   ; The layout has three rows indicated by three
   separate strings and four columns 
   indicated by the number of items inside 
   strings ' '
   </p>
   <div class=" container container1">
      <div class="cont1-item1">
         This is header
      </div>
      <div class="cont1-item2">
         This is sidebar1
      </div>
      <div class="cont1-item3">
         This is content
      </div>
      <div class="cont1-item4">
         This is footer
      </div>
      <div class="cont1-item5">
         This is sidebar2
      </div>
   </div>
   <p>
      <strong>
      grid-template-areas: '. . . .''. . item item'
      </strong> 
   ; the layout has 2 rows and 4 columns, item1 is placed
   in the second row and takes 2 columns space.
   </p>
   <div class=" container container2">
      <div class="cont2-item1">
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>

</body>

</html>

支持的浏览器

属性
grid-template-areas	57	16	52	10	44

css_properties_reference.htm

打印页面