使用 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 会自动减少列数，实现响应式布局

结合媒体查询精细控制列数

如果你希望在特定断点精确控制列数（比如移动端单列、平板两列、桌面三列），可以使用媒体查询。

立即学习“前端免费学习笔记（深入）”；

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

48

查看详情

 .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 的搭配。

以上就是如何通过