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

用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 配合 gap 可实现无需媒体查询、天然等高、源顺序独立的响应式多列布局，彻底替代 float 和 flex-wrap 的复杂断点与对齐问题。

用 CSS Grid 实现响应式多列布局最直接

首先得明确一点：HTML 本身不负责排版。index.html 文件里，我们只需要搭建好语义化的结构，真正控制列数和内容流向的，是 CSS。而在众多方案中，CSS Grid 无疑是目前最可控、也最符合“多列”直觉的选择，尤其适合首页这种需要灵活分栏的复杂场景。

很多开发者容易陷入一个误区：硬套早已过时的 float，或者滥用 inline-block。结果呢？页面在小屏幕上错位、元素间隙难以控制，为了适配不同断点，还得写上一大堆媒体查询。其实，用 Grid 往往一行声明就能搞定列数、间距和响应式适配。

• 容器是关键：display: grid 必须加在容器元素上（比如
  或

  ），而不是直接加在 index.html 的根标签上。

• 拥抱弹性单位：列宽推荐使用 fr 单位（例如 grid-template-columns: 1fr 2fr 1fr），它比固定像素值更能适应内容的动态变化。
• 间距统一管理：列与列之间的间距，请统一使用 gap 属性。千万别混用 margin，否则当子项数量变化时，布局很容易塌陷。
• 移动端优先策略：最佳实践是，先为移动端设置单列布局（grid-template-columns: 1fr），然后通过 @media 媒体查询，在中屏升级到两列，在大屏再升级到三列。

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

如果布局需求相对简单，比如只是等宽分栏的图标导航或卡片列表，那么 flexbox 方案会更轻量。但必须清醒认识到，Flexbox 本质上是一种一维布局模型，强行用它实现“多列”效果，很容易踩坑——尤其是当子项高度不一致时，对齐问题就会暴露出来。

一个典型的错误现象是：设置了 flex-wrap: wrap 之后，第二行项目的顶部无法与第一行对齐，看起来像是错位了。这背后的原因是，align-items: stretch 的默认行为是拉伸，而每次换行后，新行都会独立计算基线。

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

• 基础设置不能少：确保父容器同时设置了 display: flex 和 flex-wrap: wrap。
• 精确计算列宽：列宽需要用 flex 属性配合 calc() 手动控制，例如两列用 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 结构被浏览器强行拆散，随之而来的就是 Ja vaScript 选中、动画、焦点管理等功能的全面失效。

举个例子，如果你给一个