应使用 minmax() 配合 auto-fit 实现响应式列数，而非 repeat(3, 1fr)；gap 应设在容器上而非卡片 margin；align-items: start 更利于内容自然高度排列；图片和文本需加 object-fit 和 min-width: 0 防溢出。
为什么不用 grid-template-columns: repeat(3, 1fr) 写死列数
写死列数在响应式场景下会直接失效：窗口缩小时卡片被强制压缩，文字折行异常、图片变形、按钮被挤出边界。更麻烦的是，它无法适配不同设备的物理宽度差异——比如 iPad Pro 宽度接近桌面端，但用 repeat(3, 1fr) 会和 1920px 显示器一样排三列，实际体验拥挤。真正可靠的方案是让浏览器根据可用空间自动计算列数，核心就是 minmax() 配合 auto-fit。
gap 必须设在容器上，而不是卡片内边距
很多人习惯给每个 .card 加 margin 来制造间距，这会导致外边距合并、首尾卡片多出空白、响应式重排时错位。正确做法是把所有间距逻辑收束到容器层：
-
gap: 16px统一控制行列间隙，语义清晰且无副作用 - 卡片自身只保留
padding（用于内容呼吸感），不设任何margin或width - 若需顶部/底部额外留白，用容器的
padding，而非子元素margin
卡片内部高度不一致时，align-items: start 比 stretch 更可控
默认 align-items: stretch 会让所有卡片拉伸到同一高度，看似整齐，实则带来两个问题：一是长文本卡片撑高后，短文本卡片底部大片留白；二是图片或图标在不同高度下垂直对齐失真。改用 align-items: start 后，每张卡片按内容自然高度排列，视觉节奏更真实。如果必须等高，优先考虑 grid-auto-rows: min-content + 卡片内 display: flex; flex-direction: column 控制主体区域伸缩，而不是依赖容器拉伸。
图片和文字溢出是高频崩溃点，object-fit 和 min-width: 0 得提前加
卡片里嵌图片或长链接时，常出现撑破网格轨道、圆角被裁、阴影消失等问题。根本原因不是 Grid 不够强，而是子元素没约束好自身行为：
-
img必须设width: 100%; height: auto; object-fit: cover;，否则原始尺寸会破坏列宽计算 - 含文本的容器（如
.card-title）要加min-width: 0，防止 Flex/Grid 子项默认不收缩导致文字溢出 - 避免在卡片根元素上设
overflow: hidden—— 它会裁掉box-shadow和border-radius，真要裁图请包一层<div class="card__img"> <p>标准化卡片布局最难的不是写出第一版 Grid 代码，而是让所有卡片在内容长度、图片比例、字体渲染差异下依然保持视觉一致性。关键不在“怎么排”，而在“怎么约束子元素不乱来”。<code>gap、minmax()、min-width: 0这三个点漏掉任何一个，都可能在上线后某次数据变更时突然崩掉样式。
