在前端开发中，CSS Grid 已经成为了布局设计的重要工具。通过使用 Grid-template 属性，我们可以灵活地设置网格的行高和列宽，从而实现各种不同的布局效果。在本文中，我们将详细介绍如何使用 Grid-template 属性设置行高和列宽，并提供示例代码和实用技巧，帮助读者更好地掌握这个技术。
Grid-template 属性的基本语法
Grid-template 属性用于设置网格布局的行和列。它的基本语法如下：
grid-template: [行名称] [列名称] / [行大小] [列大小];
其中，行名称和列名称用于定义网格的行和列，可以是任意字符串。行大小和列大小用于定义行高和列宽，可以是一个具体的数值、一个百分比，或者是一个自动计算的值（如 auto）。
如何设置行高和列宽
在使用 Grid-template 属性时，我们可以通过以下方式设置行高和列宽：
1. 使用具体数值
我们可以直接使用具体的数值来设置行高和列宽，例如：
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}上面的代码将创建一个网格容器，其中第一行的高度为 100 像素，第二行的高度为 200 像素，第一列的宽度为容器宽度的 1/3，第二列的宽度为容器宽度的 2/3。
2. 使用百分比
我们也可以使用百分比来设置行高和列宽，例如：
.grid-container {
display: grid;
grid-template-rows: 20% 80%;
grid-template-columns: 1fr 2fr;
}上面的代码将创建一个网格容器，其中第一行的高度为容器高度的 20%，第二行的高度为容器高度的 80%，第一列的宽度为容器宽度的 1/3，第二列的宽度为容器宽度的 2/3。
3. 使用自动计算的值
我们还可以使用自动计算的值来设置行高和列宽。例如，如果我们想让某一行的高度自适应内容的高度，我们可以将该行的大小设置为 auto，例如：
.grid-container {
display: grid;
grid-template-rows: auto 200px;
grid-template-columns: 1fr 2fr;
}上面的代码将创建一个网格容器，其中第一行的高度根据内容自适应，第二行的高度为 200 像素，第一列的宽度为容器宽度的 1/3，第二列的宽度为容器宽度的 2/3。
示例代码
下面是一个完整的示例代码，展示如何使用 Grid-template 属性设置行高和列宽：
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid：如何使用 Grid-template 属性设置行高和列宽</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.grid-item {
background-color: #ddd;
border: 1px solid #aaa;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>上面的代码将创建一个网格容器，其中第一行的高度为 100 像素，第二行的高度为 200 像素，第一列的宽度为容器宽度的 1/3，第二列的宽度为容器宽度的 2/3。网格容器中包含了四个网格项，它们会根据网格容器的行和列自动排列。
总结
通过使用 Grid-template 属性，我们可以轻松地设置网格布局的行高和列宽，实现各种不同的布局效果。在实际开发中，我们需要根据具体的需求灵活运用这个属性，以达到最佳的布局效果。同时，我们也需要注意网格项的大小和位置，以免出现布局错乱的情况。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb97bdadd4f0e0ff472726