最直接方式是用 grid-template-columns 配合媒体查询：移动端默认 1fr，平板 min-width: 768px 设为 repeat(2, 1fr)，桌面 min-width: 1024px 设为 repeat(3, 1fr)；列宽用 1fr 更健壮；Flexbox 降级需靠 flex-basis 控制换行而非仅 flex-direction。
用 grid-template-columns 配合媒体查询控制列数
响应式多列降级为单列，最直接的方式是用 CSS Grid 的 grid-template-columns 在不同断点下切换列定义。关键不是“隐藏某几列”，而是让容器在小屏时只声明一列，大屏再扩展。
常见错误是试图用 display: none 隐藏子元素来模拟降级——这会破坏语义、影响可访问性，且无法响应内容流变化。
- 移动端优先：默认设为
grid-template-columns: 1fr - 中屏（如平板）加一列：
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面端三列：
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); } - 列宽用
1fr比固定像素更健壮，能自动均分剩余空间
Flexbox 也能做，但要注意 flex-wrap 和 flex-basis
如果项目仍用 Flexbox 布局，降级逻辑稍不同：不是靠“列数”控制，而是靠子项的最小宽度 + 是否换行来触发单列。
典型陷阱是只改 flex-direction，却没处理 flex-basis，导致小屏下子项仍强行撑宽、溢出容器。
立即学习“前端免费学习笔记（深入）”；
- 默认写法：
display: flex; flex-wrap: wrap;，子项设flex: 1 1 calc(100% - 1rem)（预留间隙） - 小屏下让每个子项占满一行：
@media (max-width: 767px) { .item { flex-basis: 100%; } } - 避免用
width: 50%硬编码，它在不同父容器宽度下可能无法整除，引发错位 -
flex-wrap: wrap必须显式声明，否则子项会强制单行挤在一起
别忽略 gap 在降级时的兼容性和重置需求
gap 是 Grid 和 Flexbox 都支持的间距属性，但它在老版本 Safari（gap 作用于 Flex 容器。而且，当列数变化时，gap 的视觉密度也会变——三列时的 gap: 1rem 在单列下可能显得空洞。
- 用
gap时，建议同时配padding或margin做降级兜底（如gap: 1rem; margin: 0.5rem;） - 在单列断点内可减小
gap：@media (max-width: 767px) { gap: 0.75rem; } - 若需兼容 iOS 15.6 及更早版本 Flex
gap，改用margin+:not(:last-child)控制子项下边距
.container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
}
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
真正难的不是写出三套 grid-template-columns，而是判断哪一级断点该切、内容密度是否匹配、以及当列数减少时，图文比例或卡片高度差异会不会导致视觉断裂——这些没法靠 CSS 自动修复，得看真实内容。
