直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 可替代90%手写媒体查询断点，基于容器实际宽度实时计算列数，避免设备误判与resize延迟问题；需配合box-sizing、gap、img响应式三行基础CSS，并在≤400px时强制单列兜底。
直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 替代所有手写断点的媒体查询，90% 的栅格场景能一步到位 —— 不需要 JS、不依赖框架、不改 HTML 结构。
为什么不用 media query 写断点
手动维护 @media (max-width: 768px)、@media (min-width: 1024px) 这类规则，本质是在猜用户设备宽度。真实场景中：
- 双屏设备（如 Surface Duo 展开态）
window.innerWidth是 1440px，但可视区域实际是两个 720px 分区，媒体查询误判为“大屏”，导致布局错乱 - 平板横竖屏切换时，
resize事件触发延迟，样式来不及更新，出现短暂错位 - 内容密度变化（比如中文字数变多、英文换行位置不同）会让同一像素宽度下，原本合适的两列突然挤成三列或溢出
而 auto-fit + minmax() 是基于容器实际可用宽度实时计算列数，逻辑更贴近人眼感知。
必须加的三行基础 CSS
光写那行 grid 是不够的，漏掉任意一条都会在小屏或高 DPR 设备上翻车：
立即学习“前端免费学习笔记（深入）”；
-
* { box-sizing: border-box; }—— 否则padding和border会让width: 100%实际超宽，引发横向滚动条 -
.grid { display: grid; gap: 1.5rem; }——gap不塌陷、不干扰盒模型，比给子项加margin可靠得多 -
img { max-width: 100%; height: auto; }—— 防止图片撑破容器，尤其在flex或grid子项中未设宽高时
移动端强制单列的兜底写法
哪怕用了 auto-fit，如果卡片内容最小宽度设成 280px，在 iPhone SE（320px 宽）上仍可能强行显示两列并产生横向滚动 —— 这是用户最反感的体验之一。必须加一层硬性限制：
@media (max-width: 400px) {
.grid {
grid-template-columns: 1fr;
}
}这个断点不是凭空定的，而是根据 minmax(300px, 1fr) 推算：当容器宽度
Flexbox 场景下怎么快速切换方向
导航栏、按钮组这类一维结构，别反复写 flex-direction: column 和 row。用更轻量的方式：
- 默认写
display: flex; flex-wrap: wrap;，让子项自然折行 - 小屏下加
@media (max-width: 768px) { .nav { flex-direction: column; } }即可 - 慎用
flex: 1给每个li—— 它会压缩文字，改用min-width: fit-content更可控
真正难的不是选 Flex 还是 Grid，而是记住：Grid 是二维系统，一旦混用 float 或未归一化的 margin，调试时看到的“错位”，往往不是代码写错了，而是布局模型冲突了。
