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

打印页面