使用Flexbox和Grid可轻松实现等高布局。1. Flexbox通过display: flex使子元素自动等高，适用于横向排列的卡片或导航栏；2. Grid通过display: grid和grid-template-columns在二维布局中实现等高，适合仪表盘或产品网格；3. 结合使用时，可用Grid划分整体页面区域，内部模块用Flex实现局部等高，如页头、侧边栏与主内容区用Grid布局，主内容区内的卡片组用Flex对齐。该方法兼顾结构灵活性与视觉一致性，提升开发效率。
实现等高布局是前端开发中的常见需求，尤其在卡片、列表或侧边栏与主内容区域对齐时。借助现代CSS的Flexbox和Grid，可以轻松实现灵活且兼容性良好的等高效果。下面介绍如何结合Flex与Grid来实践等高布局。
使用 Flexbox 实现等高布局
Flexbox 天然支持等高子元素，只要父容器设置为 display: flex，其直接子元素会自动拉伸至相同高度。
适用场景：横向排列的模块，如导航栏、卡片组。
示例代码：
HTML:
<div class="flex-container">
<div class="item">内容较少</div>
<div class="item">内容较多，有多行文字...</div>
<div class="item">中等内容</div>
</div>
CSS:
.flex-container {
display: flex;
}
.item {
border: 1px solid #ccc;
padding: 1rem;
margin: 0.5rem;
}
此时三个 .item 元素无论内容多少，都会等高对齐。
立即学习“前端免费学习笔记（深入）”；
使用 Grid 实现等高布局
Grid 布局通过定义网格轨道，也能自然实现等高效果。当子元素被放置在同一个行（row）中，它们的高度会由最大内容决定。
适用场景：二维布局，如仪表盘、产品网格。
示例代码：
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.item {
border: 1px solid #ddd;
padding: 1rem;
}
每个网格项在同一行中自动等高，无需额外设置。
Flex 与 Grid 结合使用场景
在复杂页面中，可以将 Flex 和 Grid 结合使用。例如：整体页面用 Grid 划分区域，内部模块用 Flex 实现等高。
典型结构：
- 页面布局使用 Grid：头部、侧边栏、主内容区
- 主内容区内的卡片组使用 Flex：确保每行卡片等高
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main";
grid-template-rows: auto 1fr;
height: 100vh;
}
.card-group {
display: flex;
gap: 1rem;
}
这样既保证了整体结构的灵活性，又实现了局部等高对齐。
基本上就这些。Flex 和 Grid 各有优势，选择合适的方式取决于布局维度和维护成本。实际项目中可按需组合，提升开发效率与视觉一致性。
