核心是用 minmax() 设定列宽下限以触发自动列数调整，而非仅依赖 auto-fit；推荐写法为 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，配合 gap 控制间距，避免 margin 干扰计算。
用 grid-template-columns: repeat(auto-fit, minmax(...))) 实现列数自适应
核心是让 Grid 自动计算能放几列，而不是写死列数。关键不是 auto-fit 本身，而是它和 minmax() 搭配时的行为：当容器变窄，minmax(300px, 1fr) 中的 300px 成为最小宽度门槛，Grid 会不断减少列数，直到每列都不低于这个值。
常见错误是只写 repeat(auto-fit, 1fr) —— 这样列宽会无限压缩，根本不会“换列”，因为没设下限。
-
auto-fit会合并空轨道（即没有子元素的列），而auto-fill不会，所以响应式布局必须用auto-fit - 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) - 如果希望在小屏强制单列，可加媒体查询兜底，但多数情况
minmax()已足够
为什么 minmax() 的第一个参数不能太小
比如设成 minmax(100px, 1fr)，那在中等宽度屏幕上可能硬塞出 5–6 列，内容被严重挤压，失去可读性。这不是 bug，是按规则运行的结果——只要满足“每列 ≥100px”，Grid 就继续分列。
实际项目中建议按内容最小可读宽度定这个值：卡片类通常 280–320px，文字列表可缩到 200px，但别低于 160px（否则文字换行混乱）。
立即学习“前端免费学习笔记（深入）”；
- 测试方法：拖动浏览器窗口，观察列数跳变点是否符合预期
- 用 Chrome DevTools 的 Layout 面板勾选 “Show grid line numbers” 可直观看到列数变化
- 避免用百分比或
em做minmax()下限，它们依赖上下文，响应行为难预测
需要固定间隙时，别用 gap 和 padding 混用
gap 是 Grid 原生间距，不影响子元素尺寸计算；而给子项加 padding 或 margin 会干扰 minmax() 的可用空间判断，导致列数突变不自然。
例如容器宽 700px，设 minmax(300px, 1fr) + gap: 20px，Grid 会按 “700px - 20px = 680px” 分配，最多放两列（300+300 ≤ 680）；但如果用 margin 模拟间隙，子项实际占宽变成 300+20=320px，700px 就只能塞一列了。
- 统一用
gap控制行列间距（支持row-gap/column-gap独立设置） - 子元素内部留白用
padding，但不要靠它撑开网格轨道 - 如果设计要求“边缘不留空”，加
justify-items: stretch并确保父容器无 padding
/* 推荐的完整写法 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
gap: 16px;
width: 100%;
}
<p>/<em> 子项无需 margin，也不用 flex 或 float </em>/
.grid > <em> {
/</em> 内容自由排布，但不要设 width: 100% 覆盖 grid 计算 */
}真正难调的不是语法，而是 minmax() 里那个数字——它得同时扛住手机竖屏、折叠屏、平板横屏、桌面窄窗四种场景下的内容可读性。多测几个真实设备宽度，比背规则有用得多。
