CSS Grid 是一种比较新的布局方式，可以更轻松地实现复杂的布局。而其中一种常见的应用场景就是平均分布局。在这篇文章中，我们将深入探讨 CSS Grid 实现平均分布布局的方法和技巧。
什么是平均分布布局？
平均分布布局即是将元素平均分布在容器中，从而实现视觉上的均衡。通常我们会选择将元素沿着主轴方向平均分配，比如横向排列时平均分布元素的宽度；纵向排列时平均分布元素的高度。
使用网格行
介绍第一种方法之前，我们先来看一下 CSS Grid 布局最基本的概念。在 CSS Grid 中，可以通过网格行和网格列来定义一个网格布局。CSS Grid 最常用的属性是 grid-template-columns 和 grid-template-rows，可以用来定义列和行的大小。
下面的例子中，我们定义了一个网格模板，其中有四列和两行：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
}
这样定义之后，容器内的元素就可以参照这个网格模板进行布局。例如：
-- -------------------- ---- ------- ---------- --- - ------------ - - -- --------- - - -- - ---------- - - ------------ - - --- --------- - - -- -
这个例子中，div 元素会位于第一列至第二列之间，第一行至第二行之间；p 元素会位于第三列至最后一列之间，第一行至第三行之间。
由此我们可以想到一种思路：如果将容器设置为只有一行，我们便可以利用网格行的数量来实现平均分布布局。比如我们可以这样定义：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}这个例子中，我们定义了三列，一行。这样，每个元素占据一列，就可以实现平均分布布局。例如：
-- -------------------- ---- ------- ---------- --- - ------------ -- - ---------- - - ------------ -- - ---------- ---- - ------------ -- -
这个例子中，我们使用了 3 个网格行和 3 个网格列，从而实现了平均分布布局。
使用 flexbox
除了使用网格行，我们还可以使用 flexbox。flexbox 是另一种常见的布局方式，可以很好地实现平均分布布局。
flexbox 布局有两个主要的方向，分别是水平方向（row）和垂直方向（column）。我们可以通过设置 flex-direction 属性来改变方向。比如，在水平方向上，我们可以这样设置：
.container {
display: flex;
flex-direction: row;
}这个例子中，我们设置了容器为 flex 布局，并在水平方向上排布子元素。
那么，如何实现平均分布布局呢？我们可以使用 justify-content 属性，该属性可以设置子元素在水平方向上的对齐方式，包括左对齐（flex-start）、居中对齐（center）、右对齐（flex-end）以及两端对齐（space-between 和 space-around）。例如，为了实现平均分布布局，我们可以这样设置：
.container {
display: flex;
justify-content: space-between;
}这个例子中，我们设置了容器为 flex 布局，并将子元素间间隔相等。在这种情况下，容器会自动计算出元素之间的间隔，从而实现平均分布布局。
总结
CSS Grid 和 flexbox 布局都可以实现平均分布布局。使用网格行时，我们可以根据网格行的数量来实现平均分布。而使用 flexbox 布局时，我们则可以使用 justify-content 属性，并利用间隔来实现平均分布布局。
不管使用哪种方式，平均分布布局都是非常实用的一种布局方式。通过这种方式，我们可以很好地实现视觉上的均衡，并使页面更加美观。希望本文可以为你提供一些思路和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d52d3968c7c53b0823656