CSS DEVELOPMENT LAB · 05

等高产品卡片

真实产品列表中，标题、描述、标签数量往往都不同。本实验重点解决： 卡片整体等高、按钮底部对齐、内容区域自然伸缩，同时保持响应式。

REAL-WORLD PROBLEM

内容不一样，底部仍然要整齐

外层 Grid 负责卡片列数，卡片内部使用纵向 Flex。 关键不是给每张卡片写固定高度，而是让内容区自然占据剩余空间。

户外地板产品占位图

DECKING

经典户外地板

简短描述，用来测试内容较少时按钮是否仍然和其他卡片保持底部对齐。

  • 耐候
  • 低维护
查看产品
墙板产品占位图

CLADDING

现代建筑外墙与室内墙板系统

这一张卡片故意使用更长的标题和更长的说明文字。 如果布局方式不合理，它通常会把底部按钮整体向下推，导致一排按钮无法对齐。

  • 建筑立面
  • 室内墙面
  • 多规格
查看产品
围栏产品占位图

FENCING

模块化围栏

中等长度内容，用来观察不同文字量下的卡片高度分配。

  • 隐私保护
  • 快速安装
  • 户外应用
  • 模块组合
查看产品
格栅产品占位图

SLATTED WALL

装饰格栅系统

内容长度再次缩短，但按钮位置仍然应该和同一行的其他卡片保持一致。

  • 装饰性
查看产品

CORE CSS

真正起作用的是内部 Flex

`product-body` 占满剩余高度，按钮通过 `margin-top: auto` 被推到底部。这样无需 JavaScript 测量，也不用人为限制标题或描述高度。 

.product-card {
  display: flex;
  flex-direction: column;
}

.product-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-link {
  margin-top: auto;
}

PRACTICAL CHOICE

Flex、Grid、Subgrid 怎么选？

01

Flex

最适合单张卡片内部纵向分配空间，按钮底部对齐简单、稳定、易维护。

02

Grid

最适合外层卡片列表，负责列数、间距和整体响应式。

03

Subgrid

适合需要跨多张卡片让标题、描述、按钮严格按统一轨道对齐的更复杂场景。