CSS Grid 是一种强大的布局工具，可以让前端开发者轻松构建各种布局。其中，等分布局是常见的一种布局方式。在本文中，我们将详细介绍如何在 CSS Grid 中实现等分布局，并提供示例代码以帮助您更好地掌握这个技术。
等分布局的概念
等分布局是指将一个父容器平均分成多个相等的子容器，并在其中放置内容。在实际开发中，这种布局方式可以用来展示图片、文字或其他元素。通常情况下，等分布局需要在 CSS 中手动进行样式设置，但在 CSS Grid 中，可以通过一些属性来自动完成布局。
使用 CSS Grid 实现等分布局
在 CSS Grid 中，可以通过 grid-template-columns 属性创建行和列。grid-template-columns 属性可以设置一个值或多个值来定义网格中的列。每个值代表一个网格线。可以使用长度、百分比或关键字（如 fr）来设置网格线的宽度。
例如，在下面的示例中，我们将使用 grid-template-columns 属性来创建 4 个等宽的列：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}在这个例子中，repeat(4, 1fr) 表示将 1fr 重复 4 次，即创建 4 个等宽的列。
然后，我们可以将内容放入这些列中。例如，下面的示例中，将向每个网格中添加一个文本块：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
上述示例使用一个 div 元素作为父容器，并将 display:grid; 设置为 .container 的样式。然后，使用 grid-template-columns:repeat(4,1fr) 创建一个由 4 个等宽列组成的网格。
在这个网格中，我们向每个网格添加了一个 div 元素，并将数字 1 到 4 分别放入每个 div 元素中，这样就实现了等分布局。运行代码后，您将看到一个包含 4 个网格的父容器以及 4 个等宽的列。
更多属性
除了 grid-template-columns 属性外，CSS Grid 还提供其他一些属性来帮助您更好地控制元素在网格中的位置。例如：
grid-gap
grid-gap 属性可以设置列和行之间的间距。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}在这个例子中，grid-gap 属性设置为 10px。这意味着每个网格之间的距离为 10 像素。
grid-template-rows
除了 grid-template-columns 属性外，还有一个 grid-template-rows 属性可用于创建网格的行。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
}在这个示例中，我们将使用 grid-template-rows 属性创建 3 个等高的行。因此，.container 元素将被分为 12 个相等的单元格（4 列 x 3 行）。
grid-auto-rows
grid-auto-rows 属性可以设置非显式网格行的高度值。
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
}在上面的示例中，我们设置了 grid-auto-rows 属性，以最小值 100px、最大值 auto 从而使行高度自适应内容。这些行将依次适应网格中的内容，而不是强制使用等高行。这可以使布局更灵活。
结论
CSS Grid 是一个非常强大的布局工具，可以让前端开发者轻松实现各种布局。等分布局是 CSS Grid 中最常见的一种布局方式。在本文中，我们详细介绍了如何在 CSS Grid 中实现等分布局，并提供了示例代码以帮助您更好地理解这个技术。希望这篇文章能够帮助您更快、更轻松地实现 CSS Grid 中的等分布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ed674a5bf77dda3bdf8e39