flex通过flex-wrap和flex-basis间接控制列数，如calc(50%-1rem)实现两列、calc(33.333%-1rem)实现三列；Grid用repeat(auto-fit, minmax(280px,1fr))自动适配列数，需注意IE11回退及viewport设置。
flex布局下用flex-wrap和flex-basis控制列数
Flex本身不直接定义“列数”，而是靠子项宽度和换行行为来间接实现。关键在于让每个子项在不同屏幕下占据合适比例宽度，并允许换行。
常见错误是只设flex: 1却不控制最小宽度，导致小屏下子项被强行压缩甚至溢出容器。
- 给子项设
flex: 0 1 calc(50% - 1rem)（中屏两列），配合flex-wrap: wrap - 大屏用
flex-basis: calc(33.333% - 1rem)实现三列，注意减去间隙避免换行 - 小屏退化为单列时，直接设
flex-basis: 100%，比width: 100%更兼容 flex 容器 - 务必设
gap或margin控制间距，避免用padding干扰flex-basis计算
grid布局中用repeat()和minmax()自动适配列数
Grid 更适合明确列数控制，尤其repeat(auto-fit, minmax(...))模式能根据容器宽度自动填充列数，比纯媒体查询更灵活。
但要注意auto-fit和auto-fill行为差异：前者会收缩空列，后者保留空白轨道，多数场景选auto-fit更实用。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 最小280px，最多填满 - 想限制最大列数？加
max-width到容器，或用grid-auto-columns: 1fr配合grid-template-columns显式定义 - IE11不支持
auto-fit，需回退到媒体查询 + 固定repeat(3, 1fr)等写法 - 若子项高度不一，加
align-items: start防止底部错位
媒体查询里改grid-template-columns还是flex-direction？
当响应断点明确、设计稿严格限定列数（如“桌面端必须4列，平板3列，手机1列”），媒体查询最可控；但别重复写整套规则，优先复用基础样式。
容易踩的坑是把断点值写死成768px这种设备依赖值，实际应按内容撑开需求设，比如用min-width: 40em。
- Flex方案：在
@media (min-width: 40em)里改flex-direction: row（默认可能是column）并调整flex-basis - Grid方案：同一断点下直接重写
grid-template-columns，例如从1fr→repeat(2, 1fr)→repeat(4, 1fr) - 别忘了对齐方式也要同步调：
justify-content、gap、align-items都可能随布局变化需要微调
移动端真机上列宽忽大忽小？检查viewport和缩放
不少响应式布局在桌面模拟器正常，真机却列数错乱，大概率是viewport meta 标签没写或写错，导致浏览器用桌面视口渲染。