如何实现多行可变高度项目的等高布局？无JS方案可行吗？

当然可以搞定！而且完全不需要JavaScript——其实不止CSS Grid，Flexbox也能实现这个需求，不过Grid在这种场景下的写法会更直观。先给你拆解一下具体怎么做：

一、CSS Grid 实现方案 #

这是最推荐的方式，Grid天生就会让同一行的所有网格项高度自动匹配，完美解决语言切换导致的内容高度变化问题。结合你的HTML结构，只需要给父容器.row（也就是你的.index-devicePanel-3A9CQ）加上以下CSS：

.index-devicePanel-3A9CQ {
  display: grid;
  /* 模拟col-md-4的3列布局，自动适配屏幕宽度 */
  grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr));
  /* 对应row-small-gutter的间距，替换成你实际的间距值 */
  gap: 1rem;
}

/* 响应式适配（可选，和col-md-4的断点对应） */
@media (max-width: 768px) {
  .index-devicePanel-3A9CQ {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }
}

@media (max-width: 576px) {
  .index-devicePanel-3A9CQ {
    grid-template-columns: 1fr;
  }
}

原理说明： #

• display: grid 把父容器变成网格容器
• grid-template-columns: repeat(auto-fit, minmax(33.333%, 1fr)) 表示自动生成足够的列，每列最小宽度是容器的1/3（对应col-md-4的3列），多余空间均匀分配
• Grid的默认特性就是同一行的所有子项高度会自动对齐到最高的那个，不管子项内容长短，语言切换导致的高度变化完全不用管

二、Flexbox 实现方案（补充） #

你提到觉得Flex不支持这个功能，其实是误解啦！Flexbox默认就支持等高子项，只需要确保父容器的align-items属性是默认的stretch就行。给你对应你的HTML的写法：

.index-devicePanel-3A9CQ {
  display: flex;
  flex-wrap: wrap;
  /* 对应row-small-gutter的间距 */
  gap: 1rem;
}

.col-md-4 {
  /* 模拟col-md-4的3列布局，flex-grow:1让多余空间分配 */
  flex: 1 0 33.333%;
  /* 去掉默认的padding/margin冲突（如果有的话） */
  box-sizing: border-box;
}

/* 同样加上响应式适配 */
@media (max-width: 768px) {
  .col-md-4 {
    flex: 1 0 50%;
  }
}

@media (max-width: 576px) {
  .col-md-4 {
    flex: 1 0 100%;
  }
}

原理说明： #

• align-items: stretch 是Flex容器的默认值，会让所有子项拉伸到和最高子项一样的高度
• flex-wrap: wrap 确保子项在空间不足时换行
• flex:1 0 33.333% 表示子项不会收缩（flex-shrink:0），基础宽度是容器的1/3，多余空间自动分配

总结 #

两种方案都能实现无JS的等高子项布局，Grid的写法更简洁直观，尤其是在需要复杂网格布局的时候；Flexbox也完全可行，适合已经在用Flex体系的项目。根据你的需求选一个就行啦！

内容的提问来源于stack exchange，提问作者Thomas Spring