index.html如何实现多列排版？

用 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> 或 <div class="grid">），不是加在 index.html 根标签
• 列宽推荐用 fr 单位（如 grid-template-columns: 1fr 2fr 1fr），比固定像素更适应内容变化
• 列间距统一用 gap，别混用 margin，否则子项数量变化时容易塌陷
• 移动端优先：先设单列 grid-template-columns: 1fr，再用 @media 在中屏升到两列、大屏三列

Flexbox 也能多列，但要注意主轴方向

如果只是简单等宽分栏（比如图标导航、卡片列表），flexbox 更轻量。但它本质是一维布局，强行“多列”容易踩坑——特别是当子项高度不一致时，会出现对齐断裂。

典型错误现象：flex-wrap: wrap 后第二行项目顶部没对齐第一行，看着像错位。这是因为 align-items: stretch 默认拉伸，而换行后新行独立计算基线。

立即学习“前端免费学习笔记（深入）”；

• 确保父容器设 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

避免误用 CSS Columns（多栏文本流）

column-count 看起来像“多列”，但它专为长文本分栏设计（类似报纸），会把一个块内联内容自动切片、跨列流动。用在 index.html 的导航区或卡片区，会导致 DOM 结构被浏览器强行拆散，JS 选中、动画、焦点管理全失效。

错误现象举例：你给 <section> 加了 column-count: 3，结果三个 <div class="card"> 被切成六块，顺序错乱，点击事件绑不上。

• 只适用于纯文本容器，比如 <article> 里的大段说明文字
• 绝对不要用在有交互、嵌套子组件、或需要保持 DOM 顺序的区域
• 它不支持子项设置 width 或 margin 来控制列内布局

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。