CSS Grid 中如何使用 “grid-template” 定义网格布局-JavaScript中文网-JavaScript教程资源分享门户

CSS Grid 是 Web 开发中布局的重要工具之一，它能够让我们使用网格来定义页面的结构和样式。在 CSS Grid 中，我们可以使用 grid-template 属性来定义图形的样式和布局。

本文将详细介绍如何使用 grid-template 属性来定制自己的网格布局，并提供适当的代码示例及指导意义，希望对大家学习 CSS Grid 以及网格布局有所帮助。

grid-template-columns 和 grid-template-rows

在 CSS Grid 中，我们可以通过设置 grid-template-columns 和 grid-template-rows 属性来定义网格的列数和行数，以及它们的大小。

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: 200px 1fr 2fr;
}

上面的代码将会创建一个包含 3 列和 3 行的网格布局。第一列的宽度为 200 像素，第二列和第三列自适应网格容器的剩余宽度。第一行的高度也是 200 像素，第二行和第三行自适应网格容器的剩余高度。

为了更好的呈现效果，我们可以对上述代码进行进一步解释，如下：

grid-template-columns: 200px 1fr 2fr; 将会让第一列的宽度为 200px，第二列和第三列的宽度分别占据剩余空间的 1/3 和 2/3。
grid-template-rows: 200px 1fr 2fr; 将会让第一行的高度为 200px，第二行和第三行的高度分别占据剩余空间的 1/3 和 2/3。

可以看出，通过对 grid-template-columns 和 grid-template-rows 属性的设置，我们可以轻松地控制网格容器的行数和列数，并实现自适应布局效果。

除了可以设置 grid-template-columns 和 grid-template-rows 属性，我们还可以使用 grid-template 属性，以一种更简单和直观的方式来定义网格布局。

.grid-container {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

在上面的代码中，我们使用 grid-template 属性将创建一个具有三列和三行的网格布局，具有等分的列和行。

实际上，grid-template 属性可以使用许多不同的值和单位来定义网格布局的样式和布局。例如，我们可以使用 auto-fill 和 minmax 函数来动态设置网格的大小和数量。

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

上述代码将会创建一种自适应的网格布局，其中每个网格的最小宽度为200像素，但网格的数量可以根据设置的最大宽度而变化。当容器的宽度变窄时，网格的数量也会相应缩减。当容器的宽度增加时，网格的数量也会增加。

到此为止，我们已经详细介绍了使用 grid-template 定义网格布局的方法，以及如何使用 grid-template-columns 和 grid-template-rows 属性来定制网格布局。

在 CSS Grid 中，网格布局是非常有用和适用的工具，使用它可以使我们更好地布局和组织我们的页面内容。需要注意的是，对于不同的页面布局需求，我们可以根据实际需求选择不同的方法和属性来实现。

希望本文能为您在学习 CSS Grid 的过程中提供一些指导和帮助。

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