grid-template-columns 必须显式设置才能分栏，否则默认单列；1fr 表示均分剩余空间，非百分比；gap 比 margin 更安全；列线编号从 1 开始，grid-column: 1 / -1 跨至最后一根显式列线。
grid-template-columns 必须显式写，否则等于没设
只加 display: grid 不会自动分两栏——浏览器默认只建 1 列，所有子元素堆在第一列里，视觉上和普通块级流完全一样。真正起作用的是 grid-template-columns 这个属性，它定义了“有多少列、每列多宽”。
常见错误是漏掉这行，或者写成 grid-template-columns: 200px auto 却发现右栏没占满剩余空间。原因可能是父容器没设高度、或子元素用了 width: 100% 干扰了轨道计算。
-
grid-template-columns: 250px 1fr：左栏固定 250px，右栏占剩余全部宽度 -
grid-template-columns: auto 1fr：左栏由内容撑开（比如一个窄按钮），右栏伸展 -
grid-template-columns: 1fr 1fr：等宽两栏，适合并列卡片或对比模块
1fr 不是百分比，也不是像素，它依赖容器剩余空间
1fr 表示“把当前行/列方向的可用空间分成若干份，取其中 1 份”，它不等于 50%——如果写了 grid-template-columns: 1fr 2fr，第二列会占 2/3 宽度；如果写了 1fr 1fr 1fr，就是三等分。
容易踩的坑：
- 在非 Grid 容器里写
width: 1fr→ 浏览器直接忽略，fr只能在grid-template-columns或grid-template-rows里合法出现 - 给子元素再设
width: 100%→ 破坏 Grid 的轨道分配逻辑，可能导致溢出或错位 - 容器本身 width 为 auto（比如没设 width 或 max-width），
1fr计算结果可能意外拉宽，建议父容器有明确宽度上下文
gap 比 margin 更安全，别用 margin 挤子元素
想让两栏之间留空隙？直接用 gap: 1rem。它作用于网格线之间，不影响轨道尺寸计算；而用子元素 margin-right 或 margin-left 会改变自身占用空间，导致右栏实际可分配宽度变小，甚至触发换行或滚动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
特别注意：
-
gap在 Grid 中同时控制行间距和列间距，gap: 1rem 2rem表示行距 1rem、列距 2rem - IE 不支持
gap（哪怕 flex），如需兼容 IE，改用padding+box-sizing: border-box模拟 - 不要对 Grid 子项用
margin做对齐——Grid 提供justify-items、align-items等更可控的对齐方式
子元素顺序和 grid-column 写法容易算错线号
Grid 的列线编号从 1 开始，3 列就有 4 条线（1→2→3→4）。写 grid-column: 1 / 3 是跨前两列，不是“从第 1 列到第 3 列”；写 grid-column: 1 / -1 是从第 1 条线到**最后一根显式定义的列线**，不是内容末尾。
典型翻车场景：
- 只写了
grid-template-columns: 250px 1fr（2 列 → 3 条线），却用grid-column: 1 / 4→ 第 4 条线不存在，规则失效 - 后续加了第三列但忘了更新
grid-template-columns，-1仍指向原第 3 条线，导致跨列错位 - 想让某个子项横跨整行，最稳妥写法是
grid-column: 1 / -1，前提是列轨道已明确定义
复杂布局建议用命名区域：grid-template-areas: "left right" + grid-area: left，比数字线号更直观、不易出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
