CSS grid-template 属性-之路教程

语法

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

grid-template 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px/auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template 属性示例</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

grid-template 属性的示例，其中“item1”名称被赋予网格项：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template 属性示例</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

CSS grid-template 属性

grid-template 属性定义了网格列、行和区域。
它是以下属性的简写属性：

grid-template-rows
grid-template-columns
grid-template-areas

grid-template 属性设置行和列，用正斜杠分隔。

grid-template 属性不会影响任何向下级联的排水沟（间隙）。

CSS 网格速记属性将网格属性重置为其第一个值。

如果我们不希望这些值单独级联，请使用 grid 属性代替 grid-template 属性。

初始值	none none none
应用于	网格容器。
继承	无效
可动画的	是的。网格布局是有动画的。
版本	CSS网格布局模块级别1
DOM 语法	object.style.gridTemplate ="100px/auto auto";

CSS grid-template 属性值说明

值	描述
none	没有尺寸将定义。这是此属性的默认值。
grid-template-rows/grid-template-columns	指定行和列的大小。
grid-template-areas	使用命名项目（item）（item）指定网格布局。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:34 来源：oir作者：oir

←CSS grid-template-rows 属性

CSS grid网格属性→

语法

grid-template 属性示例：

grid-template 属性的示例，其中“item1”名称被赋予网格项：

CSS grid-template 属性值说明

目录