CSS Grid auto-fit 与 auto-fill：minmax 响应式网格

---

title: CSS Grid auto-fit 与 auto-fill：minmax 响应式网格

keywords:

• auto-fit
• auto-fill
• minmax
• repeat()
• 网格布局

description: 使用 repeat(auto-fit/auto-fill, minmax()) 构建弹性网格，自动填充可用空间并保持项的最小/最大尺寸，提升响应式表现。

categories:

• 文章资讯
• 编程技术

---

概述

auto-fit 与 auto-fill 在网格轨道不足时自动折行或填充。结合 minmax(min, max) 可在不同视口保持项的可读性与对齐。

用法/示例

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }

工程建议

• 选择 auto-fit 使空轨道折叠，使用 auto-fill 保留轨道占位；依据设计选择策略。
• 与容器查询与多列布局协作，避免极端视口产生过密或过稀布局。
• 验证长词与图片的适配，必要时设置断行与占位。

参考与验证

• MDN：Grid repeat — https://developer.mozilla.org/docs/Web/CSS/repeat
• web.dev：Grid responsive — https://web.dev/learn/css/grid