新闻首页不能用 column-count，因其仅适用于连续文本流，而新闻首页是结构化区块排列，需用 grid 或 flex 实现；固定三栏会破坏响应式体验，应使用 auto-fit + minmax()；语义分层与可访问性比视觉布局更重要。
column-count 不适合新闻首页，它只对连续文本流有效；新闻首页的「多栏」本质是结构化区块排列，必须用 display: grid 或 display: flex。
为什么不能用 column-count 做新闻首页
新闻首页不是一篇长文章，而是多个独立模块（头条、热点、视频、本地、评论区等）并列展示，每个模块自带标题、图片、摘要、时间戳——这些不是可断行的文本流。column-count 对 <section></section>、<article></article> 这类块级容器完全无效，强行套用只会让所有模块堆在第一栏里。
- 浏览器看到
column-count: 3+display: grid父容器，直接忽略column-count - 即使父容器是
display: block，column-count也会把<article></article>当作一个整体塞进某栏，不会拆开标题和正文 - 响应式下无法单独控制某栏显隐（比如移动端收起右侧边栏），
column-count没有 DOM 层级控制能力
grid-template-columns 怎么写才不卡死在三栏
硬写 grid-template-columns: 1fr 1fr 1fr 是新手最常踩的坑：小屏下三栏强行挤压，字小图糊，用户得左右滑动才能看完一条新闻。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
repeat(auto-fit, minmax(300px, 1fr))替代固定列数——容器够宽就铺满三栏，窄到 300px 以下自动退为一栏 - 侧边栏需要固定宽度？写成
grid-template-columns: 1fr 240px，别用width: 240px加flex混搭 - 头条区要跨两栏？加
grid-column: span 2，但必须确保它在 grid 容器内是直接子元素 - 列间距统一用
gap: 1.5rem，别给每个.card单独设margin-right，否则 auto-fit 下会错位
flex-wrap: wrap 在新闻列表里不是可选项
新闻卡片列表（比如“今日热榜”）如果只写 display: flex 不开 flex-wrap，窄屏下卡片会被无脑压缩，图片变形、文字换行错乱，甚至溢出容器看不见。
- 必须显式声明
flex-wrap: wrap，否则 Flex 默认单行，超出部分被裁或隐藏 - 每张卡片设
flex: 0 0 calc(33.333% - 1rem)配合gap是冗余操作，auto-fit + minmax()更稳 - 卡片内文字截断用
display: -webkit-box+-webkit-line-clamp，别依赖父容器高度硬切，否则换行后高度不一致导致整行错位 - 避免在 flex 容器里嵌套另一个 flex 容器微调对齐——调试时根本分不清是哪层的
align-items在起作用
语义标签和布局容器必须分层，不能混在一层
新闻首页的 DOM 结构混乱，是后期改版、SEO、无障碍访问翻车的根源。比如把 <header></header>、<main></main>、<aside></aside> 全塞进同一个 display: grid 容器，会导致语义层级丢失，读屏软件无法识别主次。
-
<header></header>和<footer></footer>应该是页面级容器，用display: flex或普通块级布局控制垂直流向 -
<main></main>内再设display: grid或display: flex处理栏目分区，这才是合理分层 -
<aside></aside>用于右侧工具栏或推荐区，不要用<div class="sidebar"> 替代——前者能被搜索引擎和辅助工具识别为辅助内容<li>每条新闻用 <code><article></article>包裹，加itemprop="articleBody"留 Schema 扩展位，哪怕现在不用
真正容易被忽略的点是：新闻首页的「多栏」从来不是视觉问题，而是信息优先级和 DOM 可访问性的博弈。写对三行 grid 不难，难的是让头条、视频、本地新闻在不同设备上既保持结构清晰，又不破坏语义顺序。
