CSS Grid中卡片等高需显式定义grid-template-rows（如repeat(2,1fr)）并确保容器有min-height；卡片内部用flex-column+flex:1实现内容区块拉伸，图片配object-fit:cover防撑高。
直接用
+
就能搞定响应式卡片网格，等高是默认行为，不用额外 hack。
为什么 auto-fit + minmax 是核心写法
这个组合决定了卡片列数随容器宽度自动变化，且每列宽度均等——不是靠 JS 算列数，也不是靠媒体查询硬切断点。
表示：每列至少 280px 宽，剩余空间平均分配（
）
会让空的网格轨道自动收缩，比
更适合内容不定长的卡片列表
如果容器宽度不足 280px × 2，就自动退为单列；够宽就自然铺开，无需改 CSS
别写死列数如
，那在小屏上会强制三列并导致卡片过窄或横向滚动
卡片内部怎么保证等高和底部贴底
外层 Grid 控制列数与行对齐，但单张卡片内部结构还得靠 Flex 布局撑开，否则文字多的卡片会把整行拉高，破坏视觉节奏。
给
设
主体区域（如描述文字）用
或
吸收剩余空间
底部按钮用
贴底，而不是
—— 后者会脱离文档流、影响可访问性
别给
写死
，它得依赖父级 Grid 的行轨道高度计算
gap 比 margin 更安全，别混用
是 Grid 原生属性，只作用于网格项之间，不会触发外边距合并，也不需要清除末尾项的多余 margin。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
写
就能同时控制行间距和列间距
如果还给
加
，会导致实际间距翻倍，且在不同断点下难以预测
旧教程常用
+
清除，现在纯属冗余
注意：IE 不支持
，如需兼容 IE11，可用
/
替代（但不推荐为老浏览器妥协现代布局）
等高失效？先检查这三点
Grid 的等高是“同网格行内所有项目高度一致”，但容易被几个细节破坏：
父容器没设
或
，而子项内容又很短 → 实际已等高，只是看起来“塌了”
内部用了
且未设
在父级，导致高度计算丢失
图片没加
或
，加载时高度抖动，触发重排后等高错乱
最常被忽略的是：Grid 容器本身必须有明确的高度上下文（比如由内容撑开，或设
），否则
（默认）无高度可拉伸。
display: gridgrid-template-columns: repeat(auto-fit, minmax(...))minmax(280px, 1fr)1frauto-fitauto-fillrepeat(3, 1fr).carddisplay: flex; flex-direction: column; height: 100%flex-grow: 1flex: 1margin-top: autoposition: absolute.cardheightgapgap: 1.5rem.cardmarginmargin-right:nth-child()gapgrid-column-gapgrid-row-gapheightmin-height.cardposition: absoluteposition: relativeobject-fit: coveraspect-ratiomin-heightalign-items: stretch