用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 打底，别一上来就写媒体查询

这行代码是响应式新闻列表的“启动器”，不是装饰。它让浏览器自己算：屏幕够宽就多排几列，窄了就自动缩成一列，中间过渡平滑——省掉至少 70% 的断点判断。

• minmax(250px, 1fr) 中的 250px 是底线，再小就文字挤成一团；别设成 200px 或更低，手机上标题换行太碎，可读性崩塌
• auto-fit 和 auto-fill 行为不同：auto-fit 会收缩空列，auto-fill 会留空位；新闻列表必须用 auto-fit，否则小图卡片下方大片留白
• 别在 gap 上偷懒——gap: 20px 在桌面看着舒服，但在 iPhone 竖屏下会吃掉近 1/4 可视高度；后面得用媒体查询微调

给 <article></article> 套语义结构，而不是一堆 <div> <p>搜索引擎和屏幕阅读器不认“好看”，只认结构。一个没 <code><article></article>、没 <time></time>、全靠 class 命名的新闻块，在 SEO 和无障碍测试里就是残缺品。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 每条新闻必须包裹在 <article></article> 内，这是语义锚点；<header></header> 放标题+时间，<section></section> 放图和摘要，逻辑清清楚楚
• <time datetime="2026-03-04">3月4日</time> 这种写法，既让机器识别日期，又允许前端按需格式化显示，比纯文本强太多
• 图片必须带 alt 属性，哪怕只是 alt="《阿里联手腾讯投资月之暗面》配图"；空 alt="" 会让读屏器跳过，等于删掉一半信息

用 @media (max-width: 480px) 收尾，不是用来改列数，而是修细节

这时候列数早被 auto-fit 处理好了，媒体查询只干三件事：压间距、保图片比例、防文字溢出。

• gap 从 20px 降到 12px，不然手机上卡片之间全是空白，用户得狂滚屏才能看到下一条
• 图片加 height: auto 和 max-width: 100%，否则某些安卓 WebView 会拉伸变形；别信 “现代浏览器都支持”——新闻页的真实 UA 分布里，旧内核占比仍超 12%
• 标题字号别用 rem 硬切，加一句 font-size: clamp(1.1rem, 4vw, 1.5rem)，让字体随屏宽弹性缩放，避免小屏标题撑破卡片

通栏大图或专题分割线怎么跨列？用 grid-column: 1 / -1，但要避开 grid-auto-flow: dense

新闻页常有“今日聚焦”大图或栏目分隔线，需要横跨整行。这个需求很常见，但实现时有个隐蔽陷阱。

• grid-column: 1 / -1 是标准解法，表示从第一根网格线到最后一根，不管当前多少列都通栏
• 千万别为了“填满空隙”开启 grid-auto-flow: dense——它会让后续卡片按源顺序插入空位，视觉顺序和 DOM 顺序错位，对 SEO 和键盘导航是灾难
• 如果要用 :nth-child(3n) 隔行插通栏块，记得给它单独加 grid-row: span 2（如果上下都是单行卡片），否则可能被其他卡片挤到第二行去

真实项目里，最难的不是写出能跑的 Grid，而是让每张图、每个时间戳、每行标题在各种尺寸下都不“突兀”。这些细节堆起来，才是用户愿意多看两眼的原因。