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 让它往前塞：
