CSS Grid中卡片等高需显式定义grid-template-rows（如repeat(2,1fr)）并确保容器有min-height；卡片内部用flex-column+flex:1实现内容区块拉伸，图片配object-fit:cover防撑高。

直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(...)) 就能搞定响应式卡片网格，等高是默认行为，不用额外 hack。

为什么 auto-fit + minmax 是核心写法

这个组合决定了卡片列数随容器宽度自动变化，且每列宽度均等——不是靠 JS 算列数，也不是靠媒体查询硬切断点。

• minmax(280px, 1fr) 表示：每列至少 280px 宽，剩余空间平均分配（1fr）
• auto-fit 会让空的网格轨道自动收缩，比 auto-fill 更适合内容不定长的卡片列表
• 如果容器宽度不足 280px × 2，就自动退为单列；够宽就自然铺开，无需改 CSS
• 别写死列数如 repeat(3, 1fr)，那在小屏上会强制三列并导致卡片过窄或横向滚动

卡片内部怎么保证等高和底部贴底

外层 Grid 控制列数与行对齐，但单张卡片内部结构还得靠 Flex 布局撑开，否则文字多的卡片会把整行拉高，破坏视觉节奏。

• 给 .card 设 display: flex; flex-direction: column; height: 100%
• 主体区域（如描述文字）用 flex-grow: 1 或 flex: 1 吸收剩余空间
• 底部按钮用 margin-top: auto 贴底，而不是 position: absolute —— 后者会脱离文档流、影响可访问性
• 别给 .card 写死 height，它得依赖父级 Grid 的行轨道高度计算

gap 比 margin 更安全，别混用

gap 是 Grid 原生属性，只作用于网格项之间，不会触发外边距合并，也不需要清除末尾项的多余 margin。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

立即学习“前端免费学习笔记（深入）”；

• 写 gap: 1.5rem 就能同时控制行间距和列间距
• 如果还给 .card 加 margin，会导致实际间距翻倍，且在不同断点下难以预测
• 旧教程常用 margin-right + :nth-child() 清除，现在纯属冗余
• 注意：IE 不支持 gap，如需兼容 IE11，可用 grid-column-gap / grid-row-gap 替代（但不推荐为老浏览器妥协现代布局）

等高失效？先检查这三点

Grid 的等高是“同网格行内所有项目高度一致”，但容易被几个细节破坏：

• 父容器没设 height 或 min-height，而子项内容又很短 → 实际已等高，只是看起来“塌了”
• .card 内部用了 position: absolute 且未设 position: relative 在父级，导致高度计算丢失
• 图片没加 object-fit: cover 或 aspect-ratio，加载时高度抖动，触发重排后等高错乱

最常被忽略的是：Grid 容器本身必须有明确的高度上下文（比如由内容撑开，或设 min-height），否则 align-items: stretch（默认）无高度可拉伸。