Grid auto-fit 自适应
Grid 的 repeat(auto-fit, minmax(240px, 1fr)) 是史上最强的自适应一行代码：容器够宽就自动多放一列，不够就减少列数，每列永远均分剩余空间。
auto-fill 与 auto-fit 的区别：auto-fill 会保留空列位（占位），auto-fit 把空位让给现有列（拉伸）。99% 场景用 auto-fit。
- repeat(auto-fit, minmax(最小, 1fr))：列数随容器自动变化
- auto-fit 拉伸填满，auto-fill 留空位
- 配合 min() 还能给最小列宽做限幅
CSS
/* 终极自适应网格：240~1fr，自动列数 */ .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* 限幅版：小屏下不要挤成一根细条 */ .cards { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
本节要点repeat(auto-fit, minmax(最小宽, 1fr)) 是自适应布局最好用的一行 CSS。
