使用Flex和Grid可原生实现等高元素：Flex通过display: flex与align-items: stretch使子元素自动等高，适合一维布局；Grid利用grid-template-rows: 1fr或grid-auto-rows实现二维等高网格，配合minmax()支持响应式，两者结合现代CSS布局无需JS干预。
在响应式布局中实现等高元素，传统方法常依赖 JavaScript 或固定高度，但 Flex 和 Grid 提供了更优雅、原生的解决方案。它们能自动处理子元素高度对齐，适配不同屏幕尺寸。
使用 Flex 实现等高等宽布局
Flex 布局默认支持等高子元素，只要容器设置为 display: flex，其直接子元素会自动拉伸至相同高度。
关键点：
- 父容器设置 display: flex，子元素无需额外设置高度
- 子元素的 align-items 默认为 stretch，确保垂直拉伸填满容器
- 配合 flex-wrap: wrap 支持换行，在小屏下可转为列布局
- 使用 flex: 1 让子元素平均分配主轴空间
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
gap: 16px;
}
.item {
flex: 1;
padding: 20px;
}
使用 Grid 实现精确等高网格
CSS Grid 更适合二维布局，通过定义行高即可让所有单元格保持一致高度。
优势在于：
- 使用 display: grid 和 grid-template-rows: 1fr 创建弹性行高
- 所有网格项自动对齐到同一行轨道，天然等高
- 支持 grid-auto-rows 统一控制动态添加的行
- 结合 minmax() 实现响应式最小/最大高度限制
响应式技巧：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(120px, auto);
gap: 16px;
}
Flex 与 Grid 如何选择
两者都能解决等高问题，选择依据实际布局需求：
- 一维布局（如导航栏、卡片横排）优先用 Flex，逻辑清晰，兼容性好
- 二维复杂网格（如仪表盘、图片墙）推荐 Grid，控制力更强
- 现代项目可混合使用：外层用 Grid 分区，内部用 Flex 对齐内容
基本上就这些。掌握 Flex 的自动拉伸和 Grid 的轨道对齐机制，就能在各种断点下轻松实现等高元素，无需 JS 干预。不复杂但容易忽略的是 align-items: stretch 和 1fr 行高的设定，这两个细节是等高效果的关键。
