用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 配合 gap 可实现无需媒体查询、天然等高、源顺序独立的响应式多列布局，彻底替代 float 和 flex-wrap 的复杂断点与对齐问题。
用 CSS Grid 实现响应式多列布局最直接
HTML 本身不负责排版，index.html 里只需语义化结构，真正控制列数和流向的是 CSS。Grid 是目前最可控、最符合“多列”直觉的方案，尤其适合首页这种需要灵活分栏的场景。
常见错误是硬套 float 或滥用 inline-block，结果在小屏上错位、间隙难控、响应式要写一堆媒体查询。Grid 一行声明就能搞定列数、间距和断点适配。
-
display: grid必须加在容器元素上（比如<main></main>或<div class="grid">），不是加在 <code>index.html根标签 - 列宽推荐用
fr单位（如grid-template-columns: 1fr 2fr 1fr），比固定像素更适应内容变化 - 列间距统一用
gap，别混用margin，否则子项数量变化时容易塌陷 - 移动端优先：先设单列
grid-template-columns: 1fr，再用@media在中屏升到两列、大屏三列 - 确保父容器设
display: flex+flex-wrap: wrap - 列宽用
flex: 1 1 calc(50% - gap)控制两列，calc(33.333% - gap)控制三列（gap 需手动减去） - 加
align-content: flex-start防止多行时行间距异常撑开 - 若需严格等高，必须给子项设
align-self: stretch，且所有子项内容高度不能为min-content - 绝对不要用在有交互、嵌套子组件、或需要保持 DOM 顺序的区域
- 它不支持子项设置
width或margin来控制列内布局
Flexbox 也能多列，但要注意主轴方向
如果只是简单等宽分栏（比如图标导航、卡片列表），flexbox 更轻量。但它本质是一维布局，强行“多列”容易踩坑——特别是当子项高度不一致时，会出现对齐断裂。
典型错误现象：flex-wrap: wrap 后第二行项目顶部没对齐第一行，看着像错位。这是因为 align-items: stretch 默认拉伸，而换行后新行独立计算基线。
立即学习“前端免费学习笔记（深入）”；
避免误用 CSS Columns（多栏文本流）
column-count 看起来像“多列”，但它专为长文本分栏设计（类似报纸），会把一个块内联内容自动切片、跨列流动。用在 index.html 的导航区或卡片区，会导致 DOM 结构被浏览器强行拆散，JS 选中、动画、焦点管理全失效。
错误现象举例：你给 <section></section> 加了 column-count: 3，结果三个 <div class="card"> 被切成六块，顺序错乱，点击事件绑不上。<ul>
<li>只适用于纯文本容器，比如 <code><article></article> 里的大段说明文字
IE 兼容需求下如何降级处理
如果必须支持 IE11，Grid 基本不可用（仅支持旧语法，且无 gap），这时 Flexbox 是唯一可行方案，但得接受它的局限性。
关键不是“怎么让 IE 和现代浏览器一样”，而是“怎么让 IE 至少能用”。别试图用 Autoprefixer 补全 Grid，它解决不了逻辑差异。
- 用
@supports (display: grid)包裹 Grid 样式，IE 自动跳过 - 在 Grid 外层先写 Flexbox 布局作为 fallback，IE 执行它，现代浏览器被
@supports覆盖 - 避免用
grid-area或place-items这类无 IE 替代的属性 - 测试重点放在子项是否溢出容器、是否出现横向滚动条——这是 IE Flex 常见 bug
真正麻烦的不是代码写法，而是当设计师给的视觉稿要求“三列等高+悬停上浮+右侧边栏固定”时，得立刻判断哪些效果在 IE 里必须砍掉，而不是硬塞 polyfill。
