CSS Grid 是一种强大的布局方式，它可以很容易地实现等高布局。在本文中，我们将介绍几种实现等高布局的方法，包括使用 grid-template-rows 和 grid-auto-rows 属性、使用 minmax() 函数、使用 repeat() 函数以及使用 grid-template-areas 属性。
1. 使用 grid-template-rows 和 grid-auto-rows 属性
使用 grid-template-rows 和 grid-auto-rows 属性可以很容易地实现等高布局。grid-template-rows 属性用于设置网格容器的行高，而 grid-auto-rows 属性用于设置自动行高。当网格项目的高度超过了行高时，它会自动扩展到下一行。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-auto-rows: 1fr;
}在上面的示例中，我们设置了网格容器的行高为三个等分，同时设置自动行高为一等分。这样，当网格项目的高度超过了一等分时，它会自动扩展到下一行。
2. 使用 minmax() 函数
使用 minmax() 函数可以很方便地设置网格项目的最小和最大高度。minmax() 函数接受两个参数，第一个参数是最小高度，第二个参数是最大高度。
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}在上面的示例中，我们设置了网格容器的行高为三个等分，同时设置网格项目的最小高度为 100 像素，最大高度为一等分。这样，当网格项目的高度小于 100 像素时，它会自动扩展到最小高度；当网格项目的高度大于一等分时，它会自动缩小到最大高度。
3. 使用 repeat() 函数
使用 repeat() 函数可以很方便地重复设置网格容器的行高。repeat() 函数接受两个参数，第一个参数是重复次数，第二个参数是行高。
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}在上面的示例中，我们设置了网格容器的行高为三个等分，同时重复了三次。这样，我们就可以很方便地设置等高布局。
4. 使用 grid-template-areas 属性
使用 grid-template-areas 属性可以很方便地设置网格项目的位置和大小。grid-template-areas 属性接受一个字符串参数，用于设置网格容器的布局。每个字符代表一个网格项目，用空格分隔。
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}在上面的示例中，我们设置了网格容器的布局，包括一个头部、一个侧边栏、一个内容区和一个底部。然后，我们使用 grid-area 属性来设置每个网格项目的位置和大小。
总结
在本文中，我们介绍了使用 CSS Grid 实现等高布局的几种方法，包括使用 grid-template-rows 和 grid-auto-rows 属性、使用 minmax() 函数、使用 repeat() 函数以及使用 grid-template-areas 属性。这些方法都可以很方便地实现等高布局，使我们的网站更加美观和易于阅读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bf578d2f5e1655d6ac441