纯CSS响应式电商商品卡片应选用Flexbox或Grid布局而非table，因table在移动端无法等高、对齐失控且样式受限；Flexbox通过flex-direction:column与flex-grow:1实现内容顶部固定、价格按钮底部钉住；Grid配合subgrid可精准控制多行字段对齐与等高，但需注意浏览器兼容性；移动端还需处理图片懒加载、多行文字截断及点击热区最小44px等细节。
纯 CSS 就能做出靠谱的响应式电商商品列表卡片，但必须放弃用 <table> 套结构、也不依赖 JavaScript 重排——核心是选对布局模型，并提前处理好高度和对齐问题。<h3>为什么不用 table 做商品列表</h3>
<p>很多人下意识用 <code><table> 套商品数据，结果在移动端死活对不齐、文字截断失效、hover 动画错位。根本原因是：<code><tr> 和 <code><td> 的渲染逻辑被浏览器强绑定，<code>display: flex 或 display: grid 对它们无效；更麻烦的是，vertical-align 在响应式场景下完全不可控，不同长度标题会让整行卡片高度崩掉。
<table> 无法保证卡片等高，哪怕加了 <code>height: 100%- 移动端强制单列时，
<tr> 不能独立撑开成“卡片块”，语义和样式都会断裂<li>想加阴影、圆角、悬停缩放？<code><td> 的盒模型边界模糊，容易触发重绘异常<h3>Flexbox 实现等高+底部对齐的关键写法</h3> <p>Flex 是目前最稳妥的选择，尤其适合需要价格和按钮始终钉在卡片底部的电商场景。关键不在“怎么让卡片换行”，而在“怎么让内部元素自动分配空间”。</p> <ul> <li>外层容器设 <code>display: flex+flex-wrap: wrap，子项用flex: 1 1 calc(25% - 1rem)（大屏4列）配合媒体查询降级 - 每个
.card设display: flex+flex-direction: column，让内容垂直堆叠 - 文字区域（如
.card__content）加flex-grow: 1，它会吃掉剩余高度，把.card__price和.btn-buy自动挤到底部 - 图片区域务必加
aspect-ratio: 4/3或min-height，否则不同图高会导致卡片高度跳变
Grid 方案更适合复杂字段或 Subgrid 场景
如果你的商品卡片里有评分图标、标签徽章、多行描述等非线性内容，或者需要严格对齐多张卡片的“价格栏”“按钮栏”，CSS Grid 更可控。特别是 Subgrid —— 它能继承父容器轨道，省去手动计算高度。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-rows: auto 1fr auto auto明确划分图片、标题、价格、按钮四层，1fr那层自动拉伸填满剩余空间 - Subgrid 适用前提：父容器已设
display: grid且定义了grid-template-rows，子卡片只需grid-row: subgrid即可对齐所有同级卡片的底部 - 注意兼容性：
subgrid在 Safari 16.4+、Chrome 111+、Firefox 111+ 可用，iOS Safari 16.4 也支持，但旧安卓 WebView 基本不认 - 别用
grid-auto-rows替代显式轨道定义，否则等高和底部对齐会失效
移动端适配最容易漏掉的三件事
很多人写了 @media (max-width: 768px) 就以为完事，结果真机测试发现文字溢出、按钮点不中、图片糊成一片。这些细节不处理，再好看的卡片也是半成品。
- 图片必须加
loading="lazy"+decoding="async"，否则首屏加载卡顿明显 - 标题文字用
display: -webkit-box+-webkit-line-clamp: 2截断，纯text-overflow: ellipsis对多行无效 - 按钮区域最小点击热区设为
min-height: 44px（iOS 规范），并确保padding和font-size不会把它压缩到低于这个值
真正难的不是写出能跑的代码，而是让每张卡片在 iPhone SE、iPad Pro、MacBook 上都保持视觉节奏一致——高度不跳、文字不溢、按钮不飘，这需要你把 aspect-ratio、flex-grow、line-clamp 这几个点串起来压测，而不是单独调一个属性就交差。
