使用 grid-template-columns 配合 repeat() 和 auto-fit 可创建自适应文章列表，如 repeat(auto-fit, minmax(250px, 1fr)) 确保每列最小 250px 并均分空间，容器宽度变化时自动调整列数且填满行，避免空轨道，适用于响应式卡片布局。
在CSS中制作响应式文章列表时，使用 grid-template-columns 配合 repeat() 和 auto-fill 是一种高效且灵活的方法。它能自动根据容器宽度调整列数，无需依赖媒体查询就能实现自适应布局。
理解 auto-fill 的作用
auto-fill 用于 grid 布局中的 repeat() 函数，表示尽可能多地填充列，即使某些网格轨道为空。浏览器会根据可用空间自动计算能容纳多少个指定大小的列。
例如：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
这行代码的意思是：创建尽可能多的列，每列最小宽度为 250px，最大为 1fr（即均分剩余空间）。当容器宽度不足以放下新一列时，该列就不会生成，已有列会自动拉伸以填满空间。
立即学习“前端免费学习笔记（深入）”；
构建响应式文章列表结构
假设你有一组文章卡片，希望它们在不同屏幕尺寸下自动换行并均匀分布。
HTML 结构示例：
<div class="article-list"><br> <article>文章 1</article><br> <article>文章 2</article><br> <article>文章 3</article><br> <article>文章 4</article><br></div>
CSS 样式设置：
.article-list {<br> display: grid;<br> grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));<br> gap: 1rem;<br> padding: 1rem;<br>}
article {<br> background: #f4f4f4;<br> padding: 1rem;<br> border-radius: 8px;<br>}
这样，列表会在小屏幕上显示为单列，在平板或桌面端自动变为两列、三列等，始终保证每列至少 250px 宽。
minmax() 与 1fr 的配合技巧
minmax(250px, 1fr) 是关键。它设定了列的弹性范围：
- 最小 250px，防止内容被过度压缩
- 最大 1fr，让所有列平分容器空间，保持整齐对齐
如果使用固定像素值如 250px 而不用 1fr，可能导致最后一行无法填满，出现右侧空白。而 1fr 确保列宽可伸缩，视觉更均衡。
对比 auto-fill 与 auto-fit
两者相似，但行为略有不同：
- auto-fill：空轨道也会被创建，列数尽量多，即使某行只有部分列有内容
- auto-fit：不会保留空轨道，有内容的列会拉伸填满整个容器
对于文章列表，通常推荐使用 auto-fit 更美观，避免空列浪费空间：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
基本上就这些。利用 repeat(auto-fill/auto-fit, minmax()) 可快速构建真正响应式的网格布局，适合文章、卡片、图库等场景，简洁又强大。不复杂但容易忽略细节。
