CSS - grid-template-areas 屬性

CSS grid-template-areas 屬性定義了網格中命名的區域，這些區域概述了單元格的排列並用特定名稱標識它們。然後，網格的元素可以使用這些名稱透過 grid-area 屬性引用特定區域。

語法

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

屬性值

值	描述
none	它指定網格佈局中沒有命名區域。
item-names	它是一個包含區域名稱的字串序列，用於指定行和列的大小。

CSS 網格模板區域屬性示例

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

使用 none 值的網格模板區域屬性

為了在網格佈局中不包含任何命名區域，並且專案以其自然流程顯示，我們使用 none 值。專案的大小取決於其內容。這在以下示例中顯示。

示例

<!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 屬性來引用該區域。這在以下示例中顯示。

示例

<!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

列印頁面