CSS grid grid-template - 易学教程，面试笔记经验！

CSS 属性

CSS grid-template 是一个简写属性，用于指定网格列、网格行和网格区域。

grid-template 属性是以下各个网格相关属性的简写:

属性值

none: 默认值。网格将根据 grid-auto-rows 和 grid-auto-rows 自动创建。 htm" target="_blank">grid-auto-columns 属性。
<grid-template-rows> / <grid-template-columns>: grid-template-rows 和 grid-template-columns 设置为指定值，而 grid-template-areas 设置为 none。
[ <line-names>? <string> <track-size>？ < 线路名称>？ ]+ [ /<explicit-track-list> ]?: 通过定义grid-template-areas、grid-template-rows 和 grid-template-columns 使用指定的字符串。另外，在每个行大小之前和之后创建命名行。

您不能在这些轨道列表中使用repeat()函数，因为轨道必须与行和列匹配完全符合"ASCII 艺术"。

网格简写属性的工作方式与 grid-template 属性相同，并将隐式网格属性重置为其默认值。您可以使用 grid 而不是 grid-template 来避免这些值的单独级联。

适用范围

网格容器。

DOM 语法

object.style.gridTemplate = "none|<grid-template-rows> / <grid-template-columns>|[ <line-names>? <string> <track-size>? <line-names>? ]+ [ /<explicit-track-list> ]?";

CSS grid-template: none

以下示例演示了 grid-template: none 属性根据内容自动排列行和列 -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template: none;
      color: white;
      text-align: center;
      width: 360px;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
   </div>
</body>
</html>

CSS grid- template: <grid-template-rows> / <grid-template-columns>

以下示例演示了网格布局，其中两行的高度分别为 100px 和 50px，两列的宽度分别为 150px 和 300px。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template: 100px 50px / 150px 300px;
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
   </div>
</body>
</html>

CSS grid-template: 模板设计

以下示例演示了响应式和结构化的网页布局。网格布局包含导航栏、左右部分和页脚 -

<html>
<head>
<style>
   .navbar {
      background-color: lightgreen;
      grid-area: nav;
   }
   .left {
      background-color: pink;
      grid-area: left;
   }
   .right {
      background-color: violet;
      grid-area: right;
   }
   .footer {
      background-color: lightgreen;
      grid-area: footer;
   }
   .grid-box {
      display: grid;
      width: 100%;
      height: 300px;
      grid-template:
         "nav nav" 40px 
         "right left" 200px
         "footer footer" 40px;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="grid-box">
      <div class="navbar">Navbar</div>
      <div class="left">Left Section</div>
      <div class="right">Right Section</div>
      <div class="footer">Footer</div>
   </div>
</body>
</html>

CSS grid-template: 相关属性

以下是与 grid-template 属性相关的 CSS 属性列表:

属性	值
grid-template-columns	指定网格线的名称以及确定网格列大小的函数。
grid-template-rows	指定网格线和功能的名称确定网格行的大小。
grid-template-area	指定网格线的名称和确定网格区域大小的函数。