Grid实现等宽多栏应使用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))配合gap；Flex需配对flex-wrap: wrap与flex-basis；慎用grid-auto-flow: dense；响应式优先用container queries并兼顾可访问性与降级方案。
用 display: grid 实现等宽多栏，且自动响应断行
Grid 是目前最直观的多栏方案，尤其适合“几列等宽、内容不固定高度”的卡片式布局。关键不是写死列数，而是用 grid-template-columns 配合 minmax() 和 auto-fit：
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))—— 每列最小 280px，超出空间则均分；容器缩小时自动减少列数 - 必须搭配
gap控制间距，不要只靠margin，否则换行时容易错位 - IE 不支持
auto-fit，若需兼容，得回退到固定列数写法（如repeat(3, 1fr)）并配合媒体查询
用 display: flex 做多栏时，flex-wrap 和 flex-basis 必须配对使用
Flex 本质是一维布局，强行做多栏依赖换行。常见错误是只设 flex-direction: row 却忘了允许换行，结果所有子项挤在一行溢出：
- 必须显式写
flex-wrap: wrap，否则flex-basis或width在换行场景下无效 -
flex-basis: 300px比width: 300px更可靠——它参与 flex 分配计算，能避免因边框/内边距导致的列宽偏差 - 子项若含图片或文本，记得加
min-width: 0防止 flex 项目意外撑宽（尤其文本过长无换行时）
Grid 中 grid-auto-flow: dense 不是万能填充，慎用
当某些网格项设置了跨列（如 grid-column: span 2），后续小项默认按顺序填空，可能留下空白。有人会加 dense 让它往前塞：
-
dense确实能填满空隙，但会打乱 DOM 顺序和阅读流，对可访问性（screen reader）和 SEO 不友好 - 更稳妥的做法是控制项的顺序：用
order调整视觉位置，或用grid-row显式指定行号 - 如果只是想让首行填满，优先用
grid-template-rows: auto+grid-auto-rows: minmax(100px, auto)，而非依赖dense
响应式断点别只靠屏幕宽度，留意容器实际可用宽度
多栏布局常被写成“@media (max-width: 768px)”，但问题在于：侧边栏展开、视口缩放、iframe 嵌入时，容器宽度≠视口宽度：
立即学习“前端免费学习笔记（深入）”；
- 用
container queries（@container）替代媒体查询更精准，但目前仅 Chrome/Firefox 支持，需检查CSS @container是否启用 - 降级方案：给父容器设
inline-size并监听ResizeObserver，动态切 class，比纯 CSS 更可控 - 测试时别只拉浏览器窗口，要真机横竖屏切换、系统字体放大、强制深色模式，这些都可能影响最终栏数
align-items、justify-items 和子项自身的 min-height 共同兜底。 
