grid 布局宽度按比例(fr)自适应布局后,让高度自适应等于宽度

问题描述

用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
   当需要所有行高度严格一致时（比如容器有固定高度），此属性会强制所有行等比分配容器高度。