使用 display: grid + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 可实现无媒体查询、无js的自适应网格布局；auto-fit 自动合并空列并拉伸填满，minmax() 中240px为最小列宽、1fr为剩余空间均分，配合 gap 和 box-sizing: border-box 确保盒模型准确，再约束图片、文字、hover 动画等内部元素，避免破坏网格计算。
直接用 display: grid + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 就能跑通，不用写一堆媒体查询，也不用 JS 计算列数。
为什么 auto-fit + minmax() 是核心
这个组合让浏览器自己决定列数：容器够宽就多列，窄了就自动收成一列，不挤压、不换行错位。
-
minmax(240px, 1fr)中的240px是最小列宽，低于这个值浏览器宁可少一列也不压缩卡片 -
1fr不是固定像素，而是“剩余空间均分”，列数变化时宽度自动重分配 -
auto-fit会合并空列并拉伸填满，auto-fill则保留空位——响应式场景必须选auto-fit - 如果设成
minmax(320px, 1fr)，在 iPhone SE（375px 宽）上只能塞一列，但卡片内文字可能换行异常，得同步调小字体或改font-size: clamp()
gap 和 box-sizing 是隐形守门员
没它们，minmax() 很容易在小屏下失效，尤其卡片带 padding 或 border 时。
- 必须用
gap控制间距，别用margin模拟——margin参与盒模型计算，会挤占minmax()的可用宽度 -
box-sizing: border-box要全局加在卡片上，否则padding会让实际内容区窄于240px，触发列数意外减少 - Safari 15.4 之前不支持
gap在inline-grid上生效，容器必须写display: grid，不能偷懒缩写
图片和文字怎么不破布局
卡片里放图或长文本，最容易导致高度不一致、hover 时跳动、小屏文字溢出。
- 图片统一加
img { width: 100%; height: auto; }，防止撑破网格项；若需固定比例，用aspect-ratio: 4/3替代固定高 - 卡片设
min-height（比如min-height: 180px），锚定基线，避免 hover 放大时下方卡片上跳 - 标题或描述文字用
line-clamp截断，或配合overflow: hidden+text-overflow: ellipsis，防小屏文字撑宽 - hover 动画只用
transform和opacity，别碰width/height，否则触发重排
真正麻烦的不是写几行 CSS，而是忘记卡片内部元素对网格轨道的实际占用——比如一张未约束的图、一段没截断的长标题、或者一个没设 box-sizing 的 padding，都会让 minmax() 算错可用宽度，结果就是列数突变或留白。动手前先检查每个卡片的盒模型是否干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
