[TOC] ### 问题描述 用grid布局使用了一个3等分布局的样式，样式代码如下： ``` .ibl-statistic-wrap { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } ``` 可以宽度是可以保持3等分了，但是高度没有得到控制，如果在这种情况下，想要高度保持和高度一致，应该怎么设置样式呢 ### 方法一：使用 align-items: stretch（推荐） ``` .ibl-statistic-wrap { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); align-items: stretch; /* 新增关键属性 */ } /* 如果子项有内容高度差异，需要重置子项对齐方式 */ .ibl-statistic-wrap > * { align-self: stretch; /* 确保子项自身也拉伸 */ } ``` ### 方法二：固定行高（当需要精确控制时） ``` .ibl-statistic-wrap { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; /* 新增行高定义 */ align-items: stretch; /* 可选，但建议保留 */ } ``` ### 关键原理说明： 1. **`align-items: stretch`** 让子项在交叉轴（垂直方向）自动拉伸填充容器高度，这是Grid布局的默认行为，但如果有子项设置了固定高度或`align-self`属性会覆盖此行为。 2. **子项重置** 如果子项内部有内容导致高度不一致（如图片、不同行数的文字），需要显式设置`align-self: stretch`覆盖可能存在的局部样式。 3. **`grid-auto-rows: 1fr`** 当需要所有行高度严格一致时（比如容器有固定高度），此属性会强制所有行等比分配容器高度。