用 display: grid 实现三栏布局最直接：容器设 display: grid 和 grid-template-columns: 1fr 1fr 1fr，加 gap 即可；响应式时用 @media (max-width: 767px) 覆盖为 grid-template-columns: 1fr。
用 display: grid 实现三栏布局最直接
不用框架、不依赖 JavaScript，纯 CSS 就能搞定。关键不是写多少 HTML 标签，而是给容器加对 display: grid 和 grid-template-columns。HTML 只需要一个包裹容器（比如 <section>）和三个子元素（比如 <article>），其余交给 CSS 控制。
常见错误是试图用 <table> 或浮动（float）硬凑三栏——语义错、响应差、维护难。Grid 是现代浏览器原生支持的布局方案，IE11+ 也基本可用（需加 -ms- 前缀，但建议避开 IE）。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 容器设
display: grid，再用grid-template-columns: 1fr 1fr 1fr均分三栏；想留间隙就加gap: 1rem - 如果内容高度不一致，加
align-items: start防止自动拉齐底部（默认是stretch，会撑高所有格子） - 避免在子元素上设
width或float，Grid 会忽略它们
响应式断点下怎么让三栏变单栏
移动端屏幕窄，三栏挤在一起反而难读。用媒体查询（@media）在宽度小于 768px 时切回单列，是实际项目中最常写的逻辑。
立即学习“前端免费学习笔记（深入）”；
注意：别只改 grid-template-columns，顺手把 gap 也调小（比如从 1.5rem 改成 1rem），不然窄屏里空隙过大显得松散。
实操建议：
- 基础样式写三栏，
@media (max-width: 767px)里覆盖为grid-template-columns: 1fr - 如果中间栏优先级高，可用
grid-column: 1 / -1让某一项横跨整行（比如标题栏） - 避免用
min-width死锁子元素，否则可能破坏 Grid 的自动收缩行为
grid-template-columns 的几种常用值怎么选
三栏不等于必须均分。实际内容差异大时，固定比例反而难看。CSS Grid 提供了灵活的轨道定义方式，选错会影响可维护性。
例如新闻列表：左侧主图宽，中间标题长，右侧时间短——用 2fr 3fr 1fr 比 1fr 1fr 1fr 更贴合内容权重。
实操建议：
-
1fr 1fr 1fr：内容长度接近，追求视觉平衡 -
minmax(300px, 1fr) minmax(300px, 2fr) 150px：确保最小宽度，同时允许弹性伸缩（适合图文混排） -
repeat(3, minmax(250px, 1fr))：简洁写法，等价于写三次minmax，但不易微调中间项 - 避免用
px写死全部列宽（如300px 300px 300px），响应式时无法自适应
为什么子元素顺序和 DOM 顺序不一致时容易出错
Grid 允许用 grid-column 和 grid-row 打乱渲染顺序，但一旦开启这个能力，就很容易忘记“视觉顺序 ≠ 代码顺序”，导致键盘导航（Tab 键）、屏幕阅读器、SEO 抓取混乱。
比如把第三个 <article> 用 grid-column: 1 强行提到第一列，DOM 里它还是第三个——辅助技术仍按原始顺序读取。
实操建议：
- 除非有明确的无障碍替代方案（如用
aria-flowto或调整tabindex），否则保持 DOM 顺序与视觉顺序一致 - 测试时用键盘 Tab 键走一遍，确认焦点流是否符合预期
- 用浏览器开发者工具的“Accessibility”面板检查节点顺序是否被误改
Grid 布局本身不复杂，真正卡住人的往往是响应断点没设对、间隙值和字体大小单位混用（比如 gap: 1rem 但字体用 px）、或者在子元素上叠加了冲突的定位属性。动手前先想清楚：这三栏是内容并列，还是主次分明？有没有未来加第四栏的可能？这些比语法细节更影响后续修改成本。
