使用 minmax 的 Auto-fit 与 Auto-fill
使用 auto-fit、auto-fill 和 minmax() 自动创建具有响应式列数的布局。
使用 minmax 的 Auto-fit 与 Auto-fill 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
自动响应式网格
CSS 网格最强大的模式：使用 auto-fit 或 auto-fill 与 minmax() 组合，创建无需任何媒体查询、能够自动调整列数的完全响应式网格。
auto-fill
auto-fill 会在给定的最小尺寸下，尽可能多地用列填满这一行。空列会作为末尾的空轨道保留。
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit 的工作方式类似于 auto-fill，但会将空轨道折叠为零宽度。现有项目会拉伸以填满剩余空间。
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>auto-fill 与 auto-fit 的区别
只有当项目数量少于一行所能容纳的数量时，这一区别才有影响：
auto-fill：空列轨道会保留，项目不会拉伸以填满空间auto-fit：空轨道会折叠，项目会扩展以填满所有可用宽度
使用 minmax() 的 auto-fit
经典的响应式网格模式：项目宽度至少为 250px，会增长以填满空间，并自动换到新行：
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>解释 minmax()
minmax(min, max) 定义轨道尺寸范围。轨道不会小于 min，也不会大于 max。它与 fr 组合后，可以创建受最小尺寸限制的弹性轨道。
<div class="track"><div>Flexible track</div></div>使用 minmax 的 auto-fill 创建固定项目
当您希望项目保持固定尺寸，并允许末尾留有空白空间时：
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>无需媒体查询的响应式布局
这正是它的主要优势：repeat(auto-fit, minmax(280px, 1fr)) 会自动从移动设备上的单列布局调整为较大屏幕上能够容纳的最大列数：
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>使用 min() 实现更安全的 minmax
请使用 min(100%, 280px) 作为最小值，而不要直接使用像素值，以避免在很小的容器中出现布局问题：
<div class="grid"><div>Item</div></div>使用 auto-fill 实现类似瀑布流的对齐
使用 auto-fill 时，当项目数量不是列数的整数倍，末尾的空轨道可以保持对齐，这对于创建统一的网格很有用。
网格固有尺寸与 Flexbox
Flexbox 的 flex-wrap + flex: 1 1 250px 与此类似，但不能保证列宽相等，项目可能会出现不均匀的拉伸。使用 minmax 的网格可以确保轨道完全一致。
快速检查
哪个网格值可以在无需媒体查询的情况下创建响应式列，并通过折叠空轨道让项目填满可用空间？
回顾
repeat(auto-fit, minmax(250px, 1fr)) 是最强大的单一响应式网格模式，无需任何媒体查询。auto-fit 会折叠空轨道，使项目填满整行。auto-fill 会保留空轨道，以保持统一对齐。请始终将它与 gap 搭配使用来设置间距。
常见问题解答
「使用 minmax 的 Auto-fit 与 Auto-fill」课时是免费的吗？
是的 — 「使用 minmax 的 Auto-fit 与 Auto-fill」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「使用 minmax 的 Auto-fit 与 Auto-fill」这节课中我会学到什么？
使用 auto-fit、auto-fill 和 minmax() 自动创建具有响应式列数的布局。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 minmax 的 Auto-fit 与 Auto-fill」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 命名网格线与命名网格区域
- 使用 minmax 的 Auto-fit 与 Auto-fill
- 隐式网格与 Grid-Auto-Flow
- 使用 Subgrid 对齐嵌套内容