CSS Grid 布局：如何使用 grid-template 属性设定网格区域的规则

介绍

CSS Grid 布局是一种用于网页布局的新技术，它让前端开发者能够在网页上创建复杂的布局和设计。Grid 布局以网格为基础，通过将网页区域划分为行和列，从而更容易地控制页面上的布局。grid-template 属性是 Grid 布局中的一个重要属性，用于设定网格区域的规则，本文将详细介绍如何使用 grid-template 属性。

grid-template 属性

grid-template 属性用于设定网格区域的规则，主要包含以下几个部分：

• grid-template-rows：用于设定网格区域中行的数量和大小；
• grid-template-columns：用于设定网格区域中列的数量和大小；
• grid-template-areas：用于设定网格区域中具体的区域；
• grid-template：用于同时设置行、列、和区域的规则。

下面详细介绍每个部分的使用方法。

grid-template-rows

grid-template-rows 属性用于设定网格区域中行的数量和大小。其值可以为具体的长度值，也可以为百分比。当值为百分比时，它是相对于网格容器的高度来设定的。可以同时设定多个 row 的大小，它们之间需要用空格隔开，如下所示：

.container {
  display: grid;
  grid-template-rows: 50px auto 100px;
}

上述示例中，设定了三行分别为 50px、自适应大小、100px。自适应的行会根据容器的高度自动调整大小。

grid-template-columns

grid-template-columns 属性用于设定网格区域中列的数量和大小。其值的语法与 grid-template-rows 类似，也可以同时设定多个 column 的大小，它们之间需要用空格隔开，如下所示：

.container {
  display: grid;
  grid-template-columns: 20% 100px auto;
}

上述示例中，设定了三列分别为 20%、100px、自适应大小。自适应的列会根据容器的宽度自动调整大小。

grid-template-areas

grid-template-areas 属性用于设定网格区域中具体的区域。它使用类似于九宫格的方式，通过设定区域名称的方式定义每个区域的大小和位置。区域名称可以自定义，用句点表示的是空白区域。如下所示：

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

上述示例中，设置了一个 3 行 3 列的网格，其中第一行有一个宽度跨越三个单元格的 header 区域，第二行有一个宽度跨越两个单元格的 sidebar 区域和两个宽度跨越一个单元格的 main 区域，第三行有一个宽度跨越三个单元格的 footer 区域。

grid-template

grid-template 属性用于同时设置行、列、和区域的规则。其语法为：

.container {
  display: grid;
  grid-template: [row1-start] / [column1-start] [column2-start] ... [columnN-start] / [row2-start] [row3-start] ... [rowM-start]
    [row1-end] / [column1-end] [column2-end] ... [columnN-end] / [row2-end] [row3-end] ... [rowM-end]
    [row1-end name] [row2-end name] [row3-end name] ... [rowM-end name];
}

其中，/ 表示行列的分割线，行列之间用空格隔开，[row-start] 表示行的起始位置，[row-end] 表示行的结束位置，[row-end name] 表示区域名称。

以下为一个示例：

.container {
  display: grid;
  grid-template:
    "header header header" 100px
    "sidebar main main" 1fr
    "footer footer footer" 100px / 1fr 1fr 1fr;
}

上述示例中，设置了一个 3 行 3 列的网格，其中第一行有一个宽度跨越三个单元格的 header 区域，第二行有一个宽度跨越两个单元格的 sidebar 区域和两个宽度自适应的 main 区域，第三行有一个宽度跨越三个单元格的 footer 区域。设置了一个总体高度为 100px 和自适应高度的两个 row，总体宽度为三个自适应的 column。

总结

以上就是关于 grid-template 属性的详细介绍，通过使用 grid-template 属性，能够更加轻松地使用 CSS Grid 布局来创建精美的网页布局。不论是在移动端还是桌面端，使用 Grid 布局都能够实现出完美的UI效果。欢迎大家在工作中使用这一技巧，更好地完成前端的网页设计。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664a92c3d3423812e4980c52