Grid卡片布局应设grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)))，配gap统一间距；卡片自身禁用width/flex声明，图片需设width:100%; height:auto；响应式仅调minmax首参，兼容旧Safari可换auto-fit；慎用跨列，注意overflow与z-index导致的阴影圆角异常。
用 display: grid 控制卡片整体排列
Grid 是目前最直接、可控性最强的卡片布局方案，不用浮动、不用 Flex 嵌套、不依赖 JS 计算列数。关键在容器上设 grid-template-columns，浏览器自动按需换行。
- 推荐用
repeat(auto-fill, minmax(300px, 1fr)))：保证每张卡片至少 300px 宽，超出则均分剩余空间，响应自然 - 避免写死列数如
repeat(3, 1fr)：窗口缩小时卡片会被强行挤压，内容溢出或文字折行异常 - 加
gap: 1rem替代卡片内margin：避免外边距合并问题，也方便统一控制间距
卡片自身不需要 width 或 flex
卡片（子元素）在 Grid 容器里是“被动布局”的——它的尺寸由容器决定，自己设 width: 100% 或 flex: 1 不但多余，还可能破坏 Grid 的列宽计算逻辑。
- 删掉卡片上的
width、max-width、flex相关声明，只保留内容样式（如padding、border-radius） - 如果卡片内有图片，记得给
width: 100%; height: auto;，否则可能撑破网格轨道 - 慎用
grid-column: span 2这类显式跨列：它会让某张卡片占两列，破坏整体节奏，除非是设计明确要求的“大卡”
响应式断点只需改一行 minmax() 的值
真正要适配手机、平板、桌面，不是靠一堆 @media 写不同 grid-template-columns，而是把最小宽度阈值调低，让 Grid 自动适应。
- 手机屏可改
minmax(240px, 1fr)，小屏也能排两列；平板用minmax(280px, 1fr)；桌面保持300px - 不要为每个断点重写整个
grid规则，只改minmax()第一个参数即可，其余保持一致 - 测试时注意 Safari 旧版本（≤15.6）对
auto-fill支持不稳定，如有兼容需求，可降级为auto-fit，二者视觉差异极小
卡片阴影/圆角失效？检查 overflow 和层级
常见现象：加了 border-radius 和 box-shadow，但阴影被裁切、圆角不显示——大概率是父容器或卡片自身设置了 overflow: hidden，或子元素（比如图片、标题）没约束尺寸。
- 确认卡片本身没设
overflow: hidden；如果必须裁图，把overflow: hidden加在内部这类包裹层上- 阴影被遮挡？检查卡片是否在某个
z-index更低的容器里，或父容器有transform但没触发新层叠上下文- 圆角边缘发虚？那是抗锯齿问题，加
backface-visibility: hidden或transform: translateZ(0)可缓解（仅必要时）Grid 卡片布局真正的复杂点不在代码量，而在于“克制”——别急着给卡片加 width、别迷信 media query 套娃、别在子元素上反向干预父布局。留白和自动计算，才是它稳的原因。
- 阴影被遮挡？检查卡片是否在某个
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
