用CSS Grid实现响应式新闻列表，核心是利用其二维布局能力。通过设置display: grid，使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))定义灵活列宽，配合gap控制间距，可自动适配不同屏幕；结合语义化HTML结构与少量媒体查询，在小屏下调整最小宽度和间隙，确保桌面到手机的多端最佳显示效果。
用 CSS Grid 实现响应式新闻列表，核心是利用其二维布局能力和自适应特性。不需要为不同设备写大量媒体查询，就能让卡片在桌面、平板和手机上都呈现最佳效果。
定义灵活的网格容器
把包含所有新闻卡片的父元素设为网格容器，并使用
repeat()与
minmax()组合来创建能自动调整列数的布局。
- 给容器设置
display: grid
启用网格布局 - 使用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
让每列最小宽度为 250px，当空间不足时自动换行成单列 - 添加
gap: 20px
控制卡片之间的间距，避免内容挤在一起
构建简洁的HTML结构
每个新闻卡片用一个
<div>包裹，内部包含标题、图片、摘要和时间等基本元素。保持结构语义清晰，方便样式控制。
- 用
<h2>
标记标题，<p>
放摘要文字 - 使用
<img>
显示配图，并设置width: 100%
让图片随卡片缩放 - 通过
<time>
元素标注发布时间，增强可访问性
适配移动设备的细节处理
虽然 auto-fit 能自动换行，但小屏幕上仍需微调视觉体验。可以增加少量媒体查询优化极端情况下的显示效果。
立即学习“前端免费学习笔记（深入）”；
- 在屏幕小于 480px 时，将卡片最小宽度调整为
minmax(200px, 1fr)
，避免出现过长的单行文本 - 适当减小
gap
间距，比如从 20px 降到 12px，更适应窄屏空间 - 确保图片
height
设为auto
，防止拉伸变形
基本上就这些。掌握这几个关键点，就能用不到十行 CSS 搞定一个实用又美观的响应式新闻列表，维护起来也轻松得多。
