auto-fit + minmax() 是最省事的响应式网格组合，浏览器自动计算列数：最小240px，剩余空间均分，适配各屏；需配合 gap 和 box-sizing: border-box，并确保卡片内部可控。
直接用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) + gap + box-sizing: border-box 就能覆盖 90% 的卡片/列表类响应式布局，根本不需要写一堆 @media 断点。
为什么 auto-fit + minmax() 是最省事的组合
这行代码让浏览器自己算“最多塞几列”，而不是你去猜断点。每列至少 240px，多了就均分剩余空间——iPhone SE（375px 宽）自动单列，iPad 横屏（768px）出两列，桌面端自然到 4 列或更多。
-
auto-fit会收缩空轨道，内容少时卡片自动拉宽填满；auto-fill则硬留空列，小屏容易横向溢出 -
minmax(240px, 1fr)中的240px是底线，不是目标值；设太高（比如 360px）会导致中屏也只剩一列 - 父容器必须有明确宽度（如
width: 100%或max-width: 1200px），否则minmax()失效
gap 和 box-sizing 不加就会崩
很多人写了 grid 却发现卡片错位、换行异常，问题常出在没管好间距和盒模型。
-
gap: 16px必须显式声明，Safari 15.4+ 才支持，且只对display: grid生效（inline-grid不行） -
box-sizing: border-box要全局加在* { box-sizing: border-box }，否则 padding/margin 吃掉可用宽度，列数计算失准 - 别依赖 margin 推位置，改用
gap控制网格项间距，更稳定
卡片内部不约束，grid 再稳也白搭
崩坏通常不在 grid 层，而在卡片内部：一张没设 width: 100% 的图片、一段没限高的文字，都会顶开整行。
立即学习“前端免费学习笔记（深入）”；
-
img { width: 100%; height: auto; }是铁律，否则原始尺寸压垮网格项 - 卡片设
min-height: 160px（按内容基线定），防 hover 或文字增减导致跳动 - 想让按钮始终贴底？用
display: flex; flex-direction: column; height: 100%，中间段落flex-grow: 1，按钮margin-top: auto - 动画只用
transform和opacity，禁用width/height/margin
什么时候真得加 @media
只有当视觉逻辑切换时才需要，比如导航从横排变汉堡菜单、侧边栏从并排变堆叠在上方——这些不是列数变化，而是区域语义重排。
- 用
grid-template-areas切换骨架比改列数更直观：手机写"header" "main" "sidebar"，桌面写"header header" "main sidebar" - 别为“看起来像四栏”在
@media (max-width: 768px)里写display: block，等于扔掉 grid - 真实断点不是 768px，而是你在调试器里拖动窗口时，布局第一次“难看”的那个宽度
真正麻烦的不是怎么写 CSS，而是判断这个布局到底需不需要断点——大部分卡片列表、表单字段，auto-fit + minmax() 就够了；只有区域顺序或交互形态变化时，才值得引入媒体查询。
