column-count是实现新闻正文多栏排版最快方案，仅适用于文本流；栏目区块须用grid或flex，二者与column-count混用会直接失效。
column-count 是最快实现新闻首页「长文本多栏排版」的方案，但仅适用于正文段落类内容；若需卡片式栏目（如「热点」「财经」「国际」并列），必须用 display: grid 或 display: flex —— 两者不能混用，否则 column-count 直接失效。
用 column-count 排新闻正文，别碰 Flex/Grid 容器
新闻页主内容区（比如 <article></article>）想自动断行分三栏，直接加：.article { column-count: 3; column-gap: 1.5rem; }
前提是该元素是 display: block（默认就是）。如果父级写了 display: flex 或 display: grid，column-count 会彻底不生效——浏览器直接忽略。
- 别给
.article外层套个display: grid容器再指望它分栏，那是两个逻辑：Grid 分配子元素位置，column-count切割文本流 - 移动端小屏下强行设
column-count: 3，字会挤成细条，建议用媒体查询关掉：@media (max-width: 768px) { .article { column-count: 1; } } -
column-width: 250px比column-count更靠谱，浏览器按宽度自适应算栏数，内容短时不会硬撑三栏
用 display: grid 做栏目区块分栏（热点/社会/视频）
首页顶部几个并列栏目，每栏是独立 <section></section>，不是一段文字，就得用 Grid：
.nav-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
- 别写死
repeat(3, 1fr)，小屏下三栏会被压扁；auto-fit + minmax()让它在 280px 最小宽度下自动调整栏数 - 每栏内新闻列表仍用
<ul><li></ul>结构，语义清晰且利于 SEO - 如果某栏要固定宽（如广告位），写成
grid-template-columns: 240px 1fr 1fr，别混用width和flex
为什么不用 float？它现在只剩兼容 IE9 的价值
老项目里可能看到 float: left; width: 33.33% 实现三栏，但实际问题一堆：
- 父容器高度为 0（塌陷），得额外加
overflow: hidden或伪元素清除浮动 - 响应式时
width: 33.33%在不同设备上像素计算误差会导致最后一栏换行 - 和现代布局（Flex/Grid）混用，CSS 优先级打架，调试时根本看不出哪条规则在起作用
- 除非明确要支持 IE9 及更早版本，否则没理由选它
移动端真正在意的不是“几栏”，而是阅读节奏
很多团队在小屏还执着于三栏，结果每栏只容得下两行标题+一张图，用户得左右滑才能看全——这不是分栏，是切片。真正该做的是：
- 小屏（
max-width: 576px）退回到单栏流式布局，靠margin-bottom和视觉留白区分模块 - 图片必须带
loading="lazy"和固定宽高属性，否则首屏加载时布局抖动严重 - 所有文字容器用
rem，根字体随断点调整，而不是给每种屏幕写一堆px
column-count 管文本流，grid 管区块位置，flex 管主辅关系——混用即失效，而判断该用哪个，只取决于你正在排的是「一段话」还是「几个模块」。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
