使用 minmax() 与 auto-fit 可自动调整列数实现响应式文章列表，.article-list 设置 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 配合 gap；屏幕变窄时自动换行，无需多段媒体查询；若需精确控制，可结合 @media (min-width: 768px) 等断点设置 2 列或 3 列布局；同时为 .article-item 添加边框、内边距和字体样式提升可读性；该方法简洁高效，兼顾灵活性与维护性。
使用 CSS Grid 实现响应式文章列表，核心在于利用 grid-template-columns 配合媒体查询或 minmax() 与 auto-fit 等特性，让列数根据容器宽度自动调整。下面介绍几种实用方法。
使用 minmax() 与 auto-fit 自动换行
这是最简洁的方式，无需写多个媒体查询，Grid 会根据可用空间自动计算列数。
.article-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
说明：
- minmax(280px, 1fr) 表示每列最小 280px，最大占满剩余空间
- auto-fit 让网格容器在空间足够时自动填充更多列，空间不足时自动换行
- 当屏幕变窄，列宽小于 280px 时，Grid 会自动减少列数，实现响应式布局
结合媒体查询精细控制列数
如果你希望在特定断点精确控制列数（比如移动端单列、平板两列、桌面三列），可以使用媒体查询。
立即学习“前端免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
.article-list {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.article-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.article-list {
grid-template-columns: repeat(3, 1fr);
}
}
优势： 可以针对不同设备尺寸做更细致的样式调整，比如调整间距或字体大小。
为文章卡片设置基础样式
为了让列表更美观，建议给每个文章项添加一致的结构和样式。
.article-item {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
background: #f9f9f9;
}
.article-item h3 {
margin: 0 0 8px;
font-size: 1.1em;
}
.article-item p {
margin: 0;
color: #555;
font-size: 0.9em;
}
配合上面的 Grid 布局，就能形成整齐、可读性强的文章列表。
基本上就这些。用 repeat(auto-fit, minmax()) 能满足大多数响应式需求，代码少且维护简单。如果需要更精准控制，再叠加媒体查询。不复杂但容易忽略细节，比如 gap 和 min-width 的搭配。
