CSS grid-template 属性

在CSS 格子布局（CSS Grid）中，grid-template 属性用于定义网格容器（grid container）的布局。grid-template 属性的语法如下：

grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> |<global-values> ;

• none：默认值，表示无网格。
• ：定义网格行的高度。
• ：定义网格列的宽度。
• ：定义网格区域。
• ：全局值。

其中， 和 是必需的属性，因为它们定义了网格通道的大小。

网格行和列

grid-template-rows 和 grid-template-columns 属性都使用相同的语法格式：一系列值，用空格隔开。每个值都表示一个网格行或网格列，可以是一个长度、一个百分比、一个自适应（fr）、一个最小内容（min-content）或一个最大内容（max-content）值。

例如，以下代码定义了一个具有两个行和三个列的网格，其中第一行设置为 50 像素高，第二行自适应，第一列设置为 1/4，第二列为10%，第三列最大的内容宽度：

.grid-container {
  display: grid;
  grid-template-columns: 1/4 10% max-content;
  grid-template-rows: 50px auto;
}

网格区域

grid-template-areas 属性允许我们为网格容器中的每个网格单元通过名称来定义一个区域。名称可以是任何无空格字符串。例如：

.grid-container {
  display: grid;
  grid-template-areas: "header header header"
                       "sidebar main main"
                       "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 1fr 50px;
}

我们定义了一个具有三行三列的网格，每个单元格用其包含的区域名称来标识。上面的代码将输出仅具有 3 个命名区域的网格：header、sidebar、main、footer。值得注意的是，我们在定义网格行和列时仍然需要使用 grid-template-rows 和 grid-template-columns 属性。我们使用这些属性指定了每个单元格的宽度和高度。

CSS grid-template 属性教程总结

在 CSS 格子布局中，grid-template 属性是非常重要的。使用 grid-template，我们可以方便地定义网格的行和列的大小，以及为每个网格单元格分配一个具有描述性名称的区域。这使我们可以轻松地创建复杂的页面布局。