用 display: grid 实现多栏自动换行应搭配 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，避免固定列数；慎用 grid-auto-flow: row dense，注意可访问性；简化html结构，统一用 gap 控制间距。
用 display: grid 实现多栏自动换行，别碰 float 和 inline-block
零基础想让元素在多栏里自动换行，最直接有效的方式是用 CSS Grid 的 grid-template-columns 配合 auto-fit 或 auto-fill。不用写 JS，也不用算列数，浏览器自己按容器宽度塞满。
常见错误是先写 display: grid，但只设了固定列数，比如 grid-template-columns: repeat(3, 1fr) —— 这样无论屏幕多宽都死守 3 列，小屏会溢出或出现横向滚动条。
-
auto-fit：空列会被压缩消失，适合“尽量填满、宁少勿空”场景 -
auto-fill：保留所有可能的列槽位（哪怕空着），适合需要严格对齐或后续 JS 动态填充的布局 - 必须搭配
minmax()，例如minmax(280px, 1fr)，否则auto-fit在小屏下可能把列缩成一条线
grid-auto-flow: row dense 能解决“空洞”但慎用
默认 grid-auto-flow: row 是按顺序逐行填，遇到跨行元素（比如某项设了 grid-row: span 2）后，后面元素可能在下方留下空白。加 dense 会让浏览器回头填空，看起来更紧凑。
但注意：dense 会打乱 DOM 顺序对应的视觉顺序，对可访问性（如屏幕阅读器）和 SEO 不友好；如果元素有逻辑先后（比如步骤列表、时间线），不要开它。
- 只在纯展示型卡片网格（如图库、商品列表）中考虑启用
- 开启后务必用
tabindex或aria-order手动补救焦点流（实际中多数人忽略这点，导致键盘用户卡住） - 测试方法：用 Tab 键遍历，看焦点是否按预期顺序跳转
HTML 结构越简单越好，别套多余 div
初学者常把每个卡片包一层 div class="card-wrapper"，再包一层 div class="card-inner"——Grid 不吃这套。直接让卡片元素（article、section 或语义化 figure）做 grid item。
多一层嵌套，就多一层 margin / padding 冲突、多一个 box-sizing 混乱点，也增加调试难度。
- 父容器设
display: grid，子元素自动成为 grid item - 避免给卡片加
width或float，Grid 会覆盖这些声明 - 间距统一用
gap（推荐），别用子元素的margin，否则响应式时容易错位
移动端断点不是“必须加”，而是“加了反而易错”
用 auto-fit + minmax() 本身就有响应能力，很多情况下根本不需要媒体查询。硬加 @media (max-width: 768px) 反而容易写出重复逻辑，比如在小屏又写一遍 repeat(1, 1fr)，结果和大屏规则冲突。
真正要加断点的，只有两类情况：内容本身需重构（比如标题字号太小看不清）、或交互方式变化（比如卡片从横向图+文变成竖排）。
- 优先调
minmax()的最小值，例如从minmax(300px, 1fr)改成minmax(240px, 1fr)，比加断点更轻量 - 如果真要写断点，只改
gap或font-size等非布局属性，避免重复定义grid-template-columns - 用
rem或clamp()控制文字大小，比用像素断点更鲁棒
Grid 自动换行的关键不在“写多少代码”，而在理解 minmax() 和 auto-fit 的协作机制——列宽下限决定何时换行，而 auto-fit 决定换行后要不要收缩空列。这两者没配对好，再多断点也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
