CSS Grid 的 repeat(auto-fit, minmax()) 可自动调整列数，无需媒体查询；minmax(280px, 1fr) 设定单列最小宽度与弹性分配，auto-fit 收缩空轨道，适配不同屏幕。
用 CSS Grid 的 repeat() + minmax() 自动调整列数
不需要手写一堆媒体查询，grid-template-columns 配合 repeat(auto-fit, minmax(...)) 就能实现列数随容器宽度动态增减。核心是让浏览器根据可用空间和单列最小宽度，自动计算能放几列。
-
minmax(250px, 1fr)表示每列至少 250px 宽，剩余空间均分 -
auto-fit会收缩空轨道（没内容的列），auto-fill则保留所有轨道（含空） - 在小屏下，单列撑满容器；中屏出现两列；大屏稳定为三列或四列，取决于容器宽度
article {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}媒体查询断点要匹配设计稿的真实阈值，不是凭感觉写 768px
很多项目直接抄 @media (max-width: 768px)，但实际布局崩坏点往往不在这个值——比如卡片宽度 320px + 间隙后，4 列变 3 列的真实临界点可能是 1024px，而 3 列变 2 列发生在 680px。硬套通用断点反而导致中间宽度下留白错乱或换行异常。
- 用浏览器开发者工具的“响应式调试”拖动宽度，观察布局突变位置，记下精确像素值
- 优先用
min-width而非max-width，避免嵌套时层叠逻辑混乱 - 断点变量统一定义在 :root 或 SCSS 变量中，例如
--breakpoint-md: 720px，后续全部引用
flex-wrap 布局下用 flex-basis 控制单子项最小宽度
Flex 布局虽不如 Grid 灵活，但在简单流式列表中更轻量。列数变化本质是子项能否并排容纳，关键在 flex-basis 和 flex-wrap: wrap 的配合。
- 设
flex: 0 0 calc(33.333% - 1rem)可勉强实现三列，但小屏下会因精度误差导致最后一列换行失败 - 更可靠的是
flex-basis: 280px+min-width: 280px，再结合媒体查询收紧gap或改flex-direction - 注意 Safari 对
flex-basis: auto和百分比混合时的解析差异，必要时加flex-shrink: 0
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card-list > * {
flex: 0 0 280px;
min-width: 280px;
}重排布局结构时，order 属性容易引发可访问性与语义断裂
用 order 在不同断点调整视觉顺序（比如把侧边栏从右移到顶部），虽然技术上可行，但屏幕阅读器仍按 HTML 源顺序读取，键盘焦点也遵循 DOM 流。用户看到的和辅助技术“听到”的不一致，属于 WCAG 严重问题。
立即学习“前端免费学习笔记（深入）”；
- 真正需要结构重排的场景（如主次模块交换），应通过 JavaScript 动态移动 DOM 节点，而非仅靠 CSS 视觉移位
- 若必须用
order，至少同步修改aria-flowto或用inert属性临时禁用被移走区域的交互 - 移动端优先开发时，HTML 结构本身就要按内容重要性线性排列，减少对
order的依赖
实际项目里最常被忽略的是：Grid 的 auto-fit 在容器 width: fit-content 或内联元素上下文中会失效，此时必须显式设父容器 width: 100% 或触发 BFC。
