CSS Grid用repeat(auto-fit, minmax(250px,1fr)))实现自适应列数，Flexbox通过flex-wrap与flex:1 1 250px实现等宽响应式，旧浏览器需媒体查询分档控制，同时需注意对齐、gap适配及可访问性。
用 CSS Grid 实现列数随屏幕宽度自动变化
直接用 grid-template-columns 配合 repeat() 和 minmax()，就能让列数在不同断点下自适应，不需要写多个媒体查询。核心是告诉浏览器：“每列至少 250px，最多占满可用空间，能塞几列就塞几列”。
/* 一行最多显示多少列，由 minmax 决定 */
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))));
gap: 1rem;
}注意 auto-fill 和 auto-fit 的区别：前者保留空列（即使没内容），后者会收缩未填充的列宽为 0 —— 大多数场景该用 auto-fit。
用 Flexbox 做简单等宽列响应式布局
Flexbox 更适合“列宽固定、数量动态”的场景，比如卡片列表。它不原生控制列数，但配合 flex-wrap 和 min-width 能达成类似效果。
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flex-item {
flex: 1 1 250px; /* 基础宽度 250px，可伸缩 */
}常见错误是漏写 flex-wrap: wrap，导致所有子项强行挤在一行，溢出容器；或把 flex-basis 设成固定像素却不设 flex-shrink: 1，小屏下无法压缩。
立即学习“前端免费学习笔记（深入）”；
媒体查询手动控制列数（兼容旧浏览器）
当必须支持 IE11 或需要精确控制每档列数时，还是得靠媒体查询。关键不是“从几像素切到几像素”，而是按内容可读性分档：窄屏单列、中屏双列、宽屏三列、超宽屏四列。
-
max-width: 480px→grid-template-columns: 1fr -
481px to 768px→grid-template-columns: repeat(2, 1fr) -
769px to 1024px→grid-template-columns: repeat(3, 1fr) -
min-width: 1025px→grid-template-columns: repeat(4, 1fr)
别用设备像素值（如 320px、768px）做断点，它们和真实内容承载能力无关；优先考虑内容撑开后的视觉节奏。
响应式列布局容易忽略的细节
列数变了，但子项高度不一致时，Grid 默认按行对齐，可能造成空白错位；Flexbox 则可能因某一项特别高而拉长整行。这时候得干预对齐方式：
- Grid 中加
align-items: start防止高度拉伸 - Flexbox 中加
align-content: flex-start控制多行对齐 - 所有方案都需测试
gap在小屏下的实际占用 —— 1rem 在手机上可能占屏幕 1/5，建议用clamp(0.5rem, 2vw, 1rem) - 避免对
grid-column或order做响应式覆盖，逻辑会迅速失控
真正难的不是怎么让列变多或变少，而是列数变化后，内容层级、焦点顺序、可访问性标签是否还成立 —— 这些没法靠 CSS 自动修复。
