CSS Grid 布局是一种强大的网格布局系统，它可以帮助前端开发人员快速而简单地创建网格布局。其中一个重要的功能是使用 repeat() 函数来创建具有相同宽度和高度的网格。在本文中，我们将详细介绍如何使用 repeat() 函数来创建网格，并提供示例代码和实用建议。
什么是 repeat() 函数？
repeat() 函数是 CSS Grid 布局系统中的一个重要函数，它可以重复一个或多个网格轨道的规则。 repeat() 函数有两个参数，第一个参数是重复的次数，第二个参数是规则。例如，以下代码将重复三次规则：100px 200px。
grid-template-columns: repeat(3, 100px 200px);
如何使用 repeat() 函数创建具有相同宽度和高度的网格？
使用 repeat() 函数来创建具有相同宽度和高度的网格非常简单。我们只需要在 grid-template-columns 和 grid-template-rows 属性中使用 repeat() 函数即可。例如，以下代码将创建一个 3x3 的网格，每个单元格的宽度和高度都为 100px。
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
}我们也可以使用 auto-fill 和 minmax() 函数来创建具有相同宽度和高度的网格。auto-fill 可以根据容器的大小自动填充空白区域，而 minmax() 函数可以设置网格轨道的最小和最大值。例如，以下代码将创建一个自动填充的网格，每个单元格的宽度和高度都在 100px 和 200px 之间。
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 200px));
grid-template-rows: repeat(auto-fill, minmax(100px, 200px));
}示例代码
以下是一个完整的示例代码，其中使用 repeat() 函数创建了一个具有相同宽度和高度的 3x3 网格。
// www.javascriptcn.com code example
<div class="grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: #333;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>实用建议
使用 repeat() 函数创建具有相同宽度和高度的网格是一种非常常见的网格布局方法。以下是一些实用建议，帮助你更好地使用 repeat() 函数。
- 使用 repeat() 函数时，可以使用任何 CSS 长度单位，如 px、em、rem 等。
- 如果你想要创建一个具有不同宽度和高度的网格，可以使用 grid-template-areas 属性来定义网格单元格的位置和大小。
- 可以使用 auto-fit 和 minmax() 函数来创建一个自适应的网格，使其可以根据容器的大小自动调整单元格的数量和大小。
- 可以使用 grid-auto-flow 属性来定义网格单元格的流动方向，从而更好地控制网格布局。
总之，在使用 repeat() 函数时，你应该始终考虑到你的设计需求和容器的大小，以便创建出最适合你的网格布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2b7afa941bf71345511e3