最省心现代的方案是用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，让浏览器自动计算列数：小屏1列、平板2列、桌面4列；auto-fit按需分配，避免auto-fill预留空列导致拉伸变形。
用 grid-template-columns 实现自动响应式列数
新闻卡片列表最省心、最现代的方案就是 CSS Grid，核心在于不用写死列数，而是让浏览器自己算——“这个宽度下最多塞几个 280px 宽的卡片？”
关键不是 repeat(3, 1fr) 这种固定三列，而是：
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}其中 auto-fit 表示“能放几个就放几个”，minmax(280px, 1fr) 表示每列最小 280px、最大均分剩余空间。小屏下自动缩成 1 列，平板变 2 列，桌面轻松撑满 4 列。常见错误是把
auto-fit 写成 auto-fill：后者会预留空列，导致卡片被强行拉宽变形；前者才真正“按需分配”。
用 break-inside: avoid 防止新闻卡片被拦腰截断
如果误用多列布局（column-count）套在新闻卡片上，标题、图片、摘要很可能被切到不同列——用户看到一个标题在第一列，配图却跑到了第二列底部，体验极差。
必须给每个新闻卡片加这一行：
.news-card {
break-inside: avoid;
}它告诉浏览器：“别把我拆开，整块挪到下一列去”。注意：这个属性只对多列布局（column-count 或 column-width）生效，Grid/Flex 中无效，也别乱加。顺带一提，
break-inside: avoid 在 Safari 旧版本中需加前缀 -webkit-column-break-inside: avoid，但 2026 年已基本可忽略。
用 column-span: all 让头条标题横跨所有列（仅限多列布局）
如果你真在用多列布局（比如长文摘要流），又想突出一条“今日头条”，就得让它打破列限制，横贯全部列宽。
只需给那个标题加：
.headline {
column-span: all;
}前提是它的父容器启用了多列（比如设置了 column-count: 3）。⚠️ 注意两点：
•
column-span 目前仅支持块级元素（h2、div 可以，span 不行）• Firefox 对
column-span 支持稳定，Chrome/Safari 已支持多年，但部分安卓 WebView 仍不兼容——上线前务必在真机测一遍。
别用 float 做新闻多列，除非你在修 2012 年的老系统
浮动布局（float: left + clear: both）现在只剩一个合理用途：维护遗留项目。它在响应式场景里极其脆弱——列宽靠百分比硬算，小屏下文字挤成一团，换行逻辑不可控，清除浮动稍有疏漏就塌陷。
如果你看到类似这样的代码：
.left-col { float: left; width: 65%; }
.right-col { float: right; width: 32%; }请直接替换为 Grid。哪怕只是改两行：• 删掉所有
float 和 clear• 给父容器加
display: grid 和 grid-template-columns: 2fr 1fr性能、可读性、可维护性全量提升，且无兼容性风险。
真正难的不是写对那几行 CSS，而是判断该用哪套机制：Grid 适合独立卡片，Multi-column 适合连续文本流，而浮动——就当它不存在。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
