卡片自动排列靠CSS Grid实现，核心是grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))配合gap控制间距，避免float或inline-block带来的维护与响应式难题。
卡片自动排列靠的是 CSS Grid 而不是 float 或 inline-block
用 float 或 display: inline-block 做响应式卡片，后期维护成本高、断点难对齐、间隙控制反直觉。现代方案直接上 display: grid，浏览器支持已覆盖所有主流版本（Chrome 66+、Firefox 63+、Safari 11.1+），连 iOS 12.2 都没问题。
核心是用 grid-template-columns 配合 minmax() 和 auto-fit —— 它们组合起来才能真正“自动”适应容器宽度，而不是靠一堆媒体查询硬切。
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))是最常用且可靠的写法 -
auto-fit会合并空余轨道，让卡片等宽撑满整行；换成auto-fill则保留空轨道，适合需要固定列数的场景 - 最小宽度（如
300px）应略大于卡片内容实际所需空间，否则在窄屏下会触发强制换行+留白
gap 属性比 margin 更安全地控制卡片间距
很多人用 margin 给卡片加间隔，结果在首尾或换行时出现意外空白，或者响应式缩放后间隙错位。用 gap 是唯一干净解法——它只作用于网格单元之间，不干扰外边距、不触发重排、不和 justify-content 冲突。
- 写成
gap: 1rem即可同时控制行距和列距；需要分别设置就用row-gap/column-gap - 注意 Safari 旧版（gap 在
flex中支持不好，但在grid中从 11.1 就完全可用，所以放心用 - 避免同时写
gap和卡片内部的margin，尤其不要给卡片设margin-bottom，否则会和row-gap叠加
卡片内容高度不一致时，用 align-items: stretch + min-height 控制视觉整齐
文字长度不同、图片尺寸不一，会导致卡片高度参差——这不是布局失效，而是默认行为。Grid 默认让子项拉伸（align-items: stretch），但前提是内容没撑开自身高度。一旦某张卡片里有长段落或大图，它就会“顶开”整行高度。
- 给卡片容器加
min-height: 200px（按设计稿定值），能约束底线高度，避免过矮 - 用
overflow: hidden+text-overflow: ellipsis截断标题/描述，比 JS 计算行高更轻量 - 图片统一用
object-fit: cover+ 固定宽高比容器（如aspect-ratio: 4/3），iOS Safari 16.4+ 支持，老版本可用padding-top技巧兜底
移动端小屏下要防止单列卡片被过度拉宽
当屏幕窄到只能容下一列时，minmax(300px, 1fr) 中的 1fr 会让卡片占满整个视口宽度，可能把按钮、图片撑变形。这不是 bug，是 1fr 的本意：按比例分配剩余空间。
- 加一条媒体查询：
@media (max-width: 480px) { grid-template-columns: 1fr; }，并把minmax()的最小值调低至280px - 更推荐的做法是改用
clamp()：比如minmax(clamp(280px, 100%, 320px), 1fr)，兼顾最小可读性与最大舒适宽度 - 别依赖 viewport width 百分比做卡片宽度，它受缩放、字体渲染差异影响，
fr和clamp()才是稳定锚点
真正麻烦的从来不是怎么排，而是卡片内嵌组件（比如地图、视频、表单）在缩放、滚动、焦点切换时的行为是否同步。这些得靠 container queries 或 JS 监听 ResizeObserver，Grid 只负责“摆好位置”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
