推荐用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 实现自动响应式卡片列表，auto-fit 自适应列数，配合 gap 和 box-sizing 保证布局整洁与兼容性。
用 CSS Grid 实现响应式卡片列表（比如从桌面端 2 列、移动端自动变为 1 列），关键在于用 minmax() 搭配 auto-fit 或 auto-fill，再结合媒体查询微调，既简洁又健壮。
核心写法：用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
这是最推荐的“流动列数”方案，无需手动写断点也能自适应：
- 300px 是每张卡片最小宽度（可按需调整，比如 280px 或 320px）
- 1fr 表示剩余空间均分，确保卡片等宽撑满容器
-
auto-fit会在空间不足时自动折叠列数（比如只剩一列宽度时，就只排 1 列） - 父容器只需设
display: grid和该规则，卡片子元素不用额外设置
补充媒体查询，精准控制断点
如果希望严格在某宽度（如 768px）切换单列，可以加媒体查询覆盖：
- 默认（大屏）设为
grid-template-columns: repeat(2, 1fr) - 在
@media (max-width: 768px)中改为grid-template-columns: 1fr - 注意：此时建议给卡片加
margin或用gap控制间距，避免小屏挤在一起
别忘了基础样式和兼容性
让卡片真正“像卡片”，还需几处细节：
- 给 grid 容器加
gap: 1rem替代 margin，更干净可控 - 卡片自身设
width: 100%（防止内容撑宽）和box-sizing: border-box - 若需兼容老版本 Safari（auto-fit 可能不生效，此时退回到媒体查询方案更稳
不复杂但容易忽略的是：Grid 响应式本质是“内容驱动列数”，而不是“屏幕驱动”。用好 minmax() + auto-fit 就能自然适配各种宽度，比硬写多个 repeat(2)/repeat(1) 更灵活可靠。
