使用CSS Grid的auto-fit与minmax可创建响应式多列布局：.container设置display: grid，grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))使列自动适应，gap控制间距；推荐auto-fit避免空列，结合padding与max-width优化各屏显示，实现无需媒体查询的自适应文章网格。
实现多列文章布局在现代
网页设计
中非常常见，CSS Grid 提供了强大且灵活的方式完成这项任务。通过
auto-fit
与
auto-fill
配合
minmax()
和间距控制，可以轻松创建响应式多列布局，无需媒体查询。
使用 Grid 实现基础多列文章布局
要创建一个自动适应屏幕宽度的文章网格，可以使用
搭配
函数：
上面代码中，容器会根据可用空间自动计算列数。每列最小宽度为 250px，若空间足够则均分剩余空间（1fr）。
auto-fit 与 auto-fill 的区别
两者都用于动态生成网格轨道，但行为略有不同：
立即学习
“
前端免费学习笔记（深入）
”；
auto-fill
：无论是否有内容，都会尽可能多地创建符合尺寸的列。空列依然占据空间。
auto-fit
：只创建有内容的列，并将这些列拉伸填满容器。
在文章列表中推荐使用
auto-fit
，避免出现空白列，视觉更紧凑。
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
优化列间距与对齐方式
合理设置
可提升可读性。同时注意容器边距是否影响整体对齐：
使用
分别设置行间距和列间距。
添加
防止内容贴边。
使用
控制项目对齐（默认行为）。
若希望小屏下更紧凑，可减小
中的最小值，例如改为
。
处理不同屏幕下的显示效果
虽然不需要媒体查询也能实现响应式，但在极端尺寸下可微调：
大屏时限制最大列宽，防止单列过宽影响阅读，可包裹容器加
。
手机端确保最小列能完整显示，避免换行错乱。
测试时拖动
浏览器
窗口观察列数变化是否平滑。
基本上就这些。掌握 auto-fit 与 minmax 的组合，就能高效构建自适应文章网格，简洁又实用。
grid-template-columnsrepeat()
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.article {
background: #f4f4f4;
padding: 16px;
border-radius: 8px;
}
gapgap: 16px 20pxpaddingjustify-items: stretchminmax()minmax(200px, 1fr)max-width: 1200px