用 grid 的 auto-fit 配合 minmax() 实现自适应列数：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，配合 gap: 1rem 和 justify-content 控制对齐，无需 JS 或媒体查询即可响应式布局。
卡片数量变化时布局错乱，本质是容器没按需分配空间。用 grid 的 auto-fit 配合 minmax() 能让列数自动伸缩，不写死列数，也不依赖 JS 计算。
核心写法：一行搞定自适应列数
在卡片容器上设置：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))这行代码的意思是：每列最小 280px、最大占满剩余空间（1fr），浏览器会尽可能多地塞下符合宽度的列，空余空间平均分配给所有列。
- 卡片少时（比如只有 1 张），它会独占整行，宽度拉满
- 卡片变多（如 4 张），自动变成 4 列，每列约 25% 宽度
- 窗口缩小时，列数自动减少（如从 4→3→2→1），不换行错位
加个 gap 就更稳了
只设列宽还不够，卡片之间需要留白。直接加：
立即学习“前端免费学习笔记（深入）”；
注意不要用 margin 模拟间隔，否则最后一行卡片可能右偏——gap 是 Grid 原生安全间距，自动处理边界。
配合 justify-content 控制对齐方式
当卡片不够填满整行时，默认左对齐，右边留白。想居中或分散排列，加：
- justify-content: center —— 剩余卡片居中排布
- justify-content: space-between —— 卡片间等距，首尾贴边
这个属性只影响行内卡片的水平位置，不影响列数逻辑。
响应式可进一步优化体验
如果希望小屏下强制单列、中屏双列、大屏四列，可以在 minmax() 里做微调，或搭配媒体查询：
- 移动端（≤576px）：
minmax(100%, 1fr)强制单列 - 平板（577–992px）：
minmax(300px, 1fr)自动 2–3 列 - 桌面端（≥993px）：
minmax(280px, 1fr)最多 4 列
实际中往往一版 minmax(280px, 1fr) 就覆盖多数场景，无需过度分段。
