CSS - grid-template 屬性

CSS grid-template 屬性指定網格佈局的網格列、網格行和網格區域。該屬性是各個網格相關屬性的簡寫：grid-template-areas、grid-template-columns 和 grid-template-rows

語法

grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

屬性值

值	描述
none	未設定列和行的特定大小。預設值。
grid-template-rows / grid-template-columns	它指定行和列的大小。
grid-template-area	它使用命名網格項定義網格佈局。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 網格模板屬性示例

以下示例使用不同的值解釋了 grid-template 屬性。

使用 None 值的網格模板屬性

為了不具有任何預定義的行、列或區域，我們使用 none 值，它表示未定義顯式網格模板。網格將根據網格項的內容和佈局自動調整。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .container>div {
         padding: 10px;
         text-align: center;
         color: white;
         border: 3px solid blue;
         background-color: #4775d1;

      }
   </style>
</head>

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

</body>

</html>

用於行和列的網格模板屬性

要定義網格佈局中行和列的大小，我們將行的高度和列的寬度（用“/”分隔）指定給 grid-template 屬性。“/”之前的指定大小數量表示行數，“/”之後的指定大小數量表示列數。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .container1 {
         grid-template: 120px 60px / auto auto auto;
      }

      .container2 {
         grid-template: 100px 60px / 160px 130px 160px;
      }

      .container>div {
         padding: 10px;
         text-align: center;
         color: white;
         border: 3px solid blue;
         background-color: #4775d1;

      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template property
   </h2>
   <p>
      <strong>
         grid-template: 120px 60px / auto
         auto auto (2 rows and three columns)
      </strong>
      ; the first row is 120px high and second row
      is 60px high, the width of the columns has
      been set to auto and thus depends on the
      content.
   </p>
   <div class=" container container1">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>
   <p>
      <strong>
         grid-template: 100px 60px / 160px
         130px 160px (2 rows and three columns)
      </strong>
      ; the first row is 100px high and second row
      is 60px high, the first column is 160px wide,
      second column is 130px wide, third column is
      160px wide.
   </p>
   <div class="container container2">
      <div>
         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 屬性。元素需要使用單引號中的名稱來引用佈局的一部分。這在以下示例中顯示。

示例

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

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

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

      .cont1-item1 {
         grid-area: header;
      }

      .cont1-item2 {
         grid-area: sidebar;
      }

      .cont1-item3 {
         grid-area: content;
      }

      .cont1-item4 {
         grid-area: footer;
      }

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

<body>
   <h2>
      CSS grid-template property
   </h2>
   <p>
      <strong>
         grid-template: 'header header header header'
         'sidebar content content content' 
         'footer footer footer footer'
      </strong>
      ; The layout has three rows indicated by three different
      apostrophes' ' and four columns indicated by the number
      of items inside apostrophes ' '
   </p>
   <div class=" container container1">
      <div class="cont1-item1">
         This is header
      </div>
      <div class="cont1-item2">
         This is sidebar
      </div>
      <div class="cont1-item3">
         This is content
      </div>
      <div class="cont1-item4">
         This is footer
      </div>
   </div>
   <p>
      <strong>
         grid-template: 'item item . .''item item . .'
      </strong>
      ; item1 takes two rows indicated by two separate
      apostrophes ' ' and 4 columns indicated by the 
      number of items inside apostrophes ' 
   '</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	57	16	52	10	44

css_properties_reference.htm

列印頁面