最稳方案是用grid-template-columns配合媒体查询实现响应式列数切换。手机默认1fr，平板768px起2列，桌面1024px起3列，统一gap和box-sizing，避免float塌陷与JS监听缺陷。
直接用 grid-template-columns 配合媒体查询最稳，比 Flexbox 或 float 更少出错、语义更清晰、可访问性更好。
为什么不用 float 或 JavaScript 检测宽度
float 需要手动清除浮动、容易塌陷，且在小屏下靠 width: 100% 强制单列时，若父容器有 padding 或 border，常因 box-sizing 缺失导致溢出；JavaScript 监听 resize 不仅多余，还无法响应设备旋转、分屏或多窗口场景——CSS 媒体查询才是浏览器原生支持的响应机制。
Grid 实现宽屏三列 → 平板两列 → 手机单列
核心是让容器在不同断点下声明不同数量的列，而不是隐藏元素或强行重排。关键参数必须用 1fr，避免固定像素或百分比带来的错位风险。
- 默认（手机）：
grid-template-columns: 1fr - 平板（≥768px）：
@media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 桌面（≥1024px）：
@media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr); } - 加
gap: 1rem统一控制间距，比用margin更可靠
Flexbox 方案中必须设 flex-basis 而非只改 flex-direction
很多人只写 flex-direction: column 以为就能单列，结果子项仍按原 flex-basis 撑开、换行异常甚至横向溢出。真正起效的是控制子项“最小占位宽度”。
立即学习“前端免费学习笔记（深入）”；
- 默认（多列）：
.form-group { flex: 1 1 calc(33.333% - 0.666rem); }（预留 gap 空间） - 窄屏（≤767px）：
@media (max-width: 767px) { .form-group { flex-basis: 100%; } } - 必须显式写
flex-wrap: wrap，否则即使设了flex-basis也不换行 -
flex: 1 1 100%在小屏下无效，因为flex-grow会试图均分剩余空间，反而破坏单列
表单项内部宽度别硬写 width: 100%
input 和 textarea 在 Grid/Flex 容器里默认会自动撑满所在网格或弹性项，再套一层 width: 100% 可能引发双层盒模型叠加，尤其当父项有 padding 但没设 box-sizing: border-box 时。
- 统一加
* { box-sizing: border-box; } - 表单项直接继承父项宽度，无需额外设
width - 如需限制最大宽度（比如大屏下不让输入框过宽），用
max-width: 500px更安全
真正难的不是写几行媒体查询，而是理解「列数变化」本质是容器级布局定义的切换，不是对子元素做显隐或尺寸微调；一旦把逻辑锚定在容器的 grid-template-columns 或子项的 flex-basis 上，大部分错位、溢出、读屏器乱序问题就自然消失了。
