应优先用column-count实现文本流分栏，因其原生支持自动断行、不改dom、兼容ie10+；结构化分栏则须用flex或grid，混用会导致失效。
分栏布局不是“选一个方案就行”，而是得先分清你要的是「结构化分栏」还是「文本流分栏」——前者用 display: flex 或 display: grid，后者用 column-count；混用会直接失效。
用 column-count 做新闻/长文多栏排版
这是唯一原生支持“同一段文字自动断行分栏”的方案，不改 DOM 结构、不影响可访问性，IE10+ 全支持。
-
column-count: 3只是“期望栏数”，实际栏数由容器宽度和column-width共同决定；设了column-width: 200px后，column-count可能被忽略 - 必须确保父容器是
display: block或inline-block；如果父元素用了display: flex或display: grid，column-count完全不生效 - 防跨栏断裂：给段落加
break-inside: avoid，但注意它对<img>和<iframe></iframe>无效 - 跨栏标题用
column-span: all，但该元素不能有float、position: absolute，且需显式声明display: block
用 display: grid 实现卡片/模块类三栏布局
Grid 不处理文本断行，它只分配子元素位置。适合 <article></article>、<section></section> 这类独立区块的并列排列。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
grid-template-columns: repeat(3, 1fr)在小屏下会把三栏强行压窄，应配合auto-fit和minmax()：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 列间距统一用
gap，别再单独写margin—— 否则响应式时容易错位 - 如果某栏需要固定宽度（如侧边栏），写成
grid-template-columns: 240px 1fr，而不是靠width+flex混搭 - 避免在 Grid 容器里嵌套另一个 Flex 容器来“微调”子项对齐——语义混乱，调试时定位困难
用 display: flex 实现左右主辅分栏（比如文章页）
Flex 是一维布局，适合明确主次关系的横向或纵向切分，比如 <aside></aside> + <main></main> 组合。
- 左栏固定宽、右栏自适应：左栏设
width: 240px; flex-shrink: 0，右栏设flex: 1；不加flex-shrink: 0，小屏下左栏会被压缩 - 别把
display: flex直接加在上——<header></header>和<footer></footer>会被拉伸变形；应该分层：外层flex-direction: column控制垂直流向，<main></main>再设display: flex - 旧代码残留
float时，父容器要加overflow: hidden或display: flow-root，否则 Flex 子项可能被浮动元素干扰 -
flex-wrap: wrap不是默认行为，如果内容超宽又没开它，右栏会溢出或被强行压缩
真正容易被忽略的点是：分栏的语义目的决定了技术选型——你要排一段新闻正文，就别用 Grid 去套 <p></p>；你要展示三个商品卡片，也别用 column-count 去拆它们。结构意图不清，后面所有样式都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
