CSS | grid-template 属性介绍

grid-template 是 CSS Grid Layout 中用来定义网格布局的属性之一，它允许我们通过指定行数、列数、行高、列宽等来创建网格。

语法

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <'grid-template-rows'> / <'grid-template-columns'> ] [ / <'grid-template-areas'> ]? | [ <'grid-template-rows'> / <'grid-template-columns'> ] [ / <'grid-template-areas'> ]? [ / <'grid-auto-flow'> ]?;

上面的语法中，方括号 [] 表示可选项，竖线 | 表示多个选项中选择一个。

grid-template 属性值可以有以下 4 种可能的组合：

• none：默认值，表示没有网格。
• <'grid-template-rows'> / <'grid-template-columns'>：用于指定行和列的数量、大小和名称。
• <'grid-template-rows'> / <'grid-template-columns'> [ / <'grid-template-areas'> ]：在上一种组合的基础上，额外指定网格区域的模板。
• <'grid-template-rows'> / <'grid-template-columns'> [ / <'grid-template-areas'> ] [ / <'grid-auto-flow'> ]：在上一种组合的基础上，额外指定自动布局模式。

属性值

以下是 grid-template 属性中可能使用的值的详细描述：

none

如果 grid-template 的值为 none，则表示没有网格。这种情况下，网格项会按照默认的流式布局排列，不会像 CSS Grid 一样排列网格。

<'grid-template-rows'>

<'grid-template-rows'> 用于指定行的数量、大小和名称，其值可以包含以下内容之一：

• none：表示没有行。

• <track-list>：用于指定每个轨道的大小、数量和名称。

  <track-list> 是由一组长度，百分比，auto，网格线名称等组成的列表。它们以空格分隔。例如：

  grid-template-rows: 50px 30% auto 20px;
  

  这将创建由四个行组成的网格，每个行的尺寸为 50 像素，30% 的父容器高度，自动大小和 20 像素。

• repeat()：函数用于重复标识轨道（大小、数量、名称），其参数可以是轨道名称、长度、百分比等。例如：

  grid-template-rows: repeat(3, 1fr 2fr);
  

  这将创建由六个行组成的网格，尺寸分别为第 1 行 1 份、第 2 行 2 份、第 3 行 1 份、第 4 行 2 份、第 5 行 1 份、第 6 行 2 份。

<'grid-template-columns'>

<'grid-template-columns'> 用于指定列的数量、大小和名称，其取值方式与 <'grid-template-rows'> 是类似的。

<'grid-template-areas'>

<'grid-template-areas'> 是一种基于字符矩阵的方法，用于指定网格区域的模板。它由一组字符串构成，其中每一行代表一行区域，每一个字符代表一个单元格区域，用于命名区域。

例如：

grid-template-areas:
  "header header header"
  "left main right"
  "footer footer footer";

这将创建一个网格区域，其中有一个带有 header 名称的 1x3 区域，一个带有 left 名称的 1x1 区域，一个带有 main 名称的 1x1 区域，一个带有 right 名称的 1x1 区域，以及一个带有 footer 名称的 1x3 区域。

<'grid-auto-flow'>

<'grid-auto-flow'> 用于指定自动放置时网格项如何流动。

其可能的取值如下：

• row：将网格项按行排列。
• column：将网格项按列排列。
• dense：尝试填充所有空间，不管会不会有空间留下。