CSS Grid 布局是一种强大的前端布局方法，可以非常灵活地进行网格化布局设计。在实际使用中，我们可能会遇到需要实现自适应的等分列或者行的需求，本文就将介绍如何在 CSS Grid 布局中实现这类布局方式。
实现等分列
在 CSS Grid 布局中实现等分列可以通过设置网格的总列数以及每个网格的宽度来实现。例如，当我们需要将一个区域分成 4 等分的布局时，可以按照以下步骤进行：
- 在 CSS 中设置布局容器的 display 属性为 grid。
.container {
display: grid;
}- 设置网格的总列数为 4：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}以上代码中，repeat(4, 1fr) 表示将总列数设置为 4，并且每个网格的宽度均为布局容器宽度的 1/4。
- 设置子元素的样式。
如果我们需要将子元素均分列宽，可以将子元素的宽度设置为 100%：
.item {
width: 100%;
}实现等分行
实现等分行也类似于实现等分列。不同之处在于，我们需要设置网格的总行数，以及每个网格的高度。例如，当我们需要将一个区域分成 3 等分的布局时，可以按照以下步骤进行：
- 在 CSS 中设置布局容器的 display 属性为 grid。
.container {
display: grid;
}- 设置网格的总行数为 3：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
}以上代码中，repeat(3, 1fr) 表示将总行数设置为 3，并且每个网格的高度均为布局容器高度的 1/3。
- 设置子元素的样式。
如果我们需要将子元素均分行高，可以将子元素的高度设置为 100%：
.item {
height: 100%;
}总结
CSS Grid 布局是一种非常强大且灵活的前端布局方法。通过以上步骤，可以轻松地实现自适应的等分列或行布局。需要注意的是，在设计网格布局时，要考虑到子元素的样式设置，以确保网格布局达到期望的效果。
示例代码
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- ------ ----- ------- ------ - ----- - ----------------- -------- ------- ----- ------ ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aab7dd48841e98946c74ad
