fr单位最灵活，均分三栏写1fr 1fr 1fr；混用fr与px易导致压缩，固定列建议用minmax(200px,max-content)；gap比margin更干净；grid-column:2/4跨2栏非3栏；命名线和grid-template-areas提升可读性与结构清晰度。
grid-template-columns 用 fr 单位分栏最灵活
直接写 grid-template-columns: 1fr 1fr 1fr 就能均分三栏，比用百分比或固定像素更可靠。fr 是“fraction”的缩写，表示剩余空间的份数，浏览器会自动按比例分配，不依赖容器总宽是否整除。
常见错误是混用 fr 和 px：比如 grid-template-columns: 200px 1fr 1fr 看似合理，但当内容撑开第一列时，后面两栏可能被压缩到最小宽度（由 min-width 或内容决定），实际显示异常窄。建议固定列用 minmax(200px, max-content) 包裹，再配合 fr。
- 需要响应式？在媒体查询里改
grid-template-columns，比如小屏切为1fr - 避免用
auto-fit+minmax()时漏写grid-auto-flow: column，否则元素仍按行排列 - IE 不支持 fr，若需兼容，得降级用
display: flex或 JS 补丁
gap 属性比 margin 更干净地控制栏间距
用 gap: 1rem 同时设置行列间距，比给每个格子加 margin-right/bottom 强得多——它不会在网格边缘多出空白，也不触发 margin 合并问题。
注意 row-gap 和 column-gap 可单独设，但 Safari 旧版本对 gap（简写）支持不稳定，如遇断层，优先拆成两个属性写。
立即学习“前端免费学习笔记（深入）”；
-
gap值不能为负 - 如果格子内有
padding，gap是额外加在 padding 外的，不是替代 - 和 Flex 布局不同，Grid 的
gap对place-items或justify-content无影响
grid-column / grid-row 定位常被误用为“跨列”而非“占位”
写 grid-column: 2 / 4 意思是“从第 2 条线开始，到第 4 条线结束”，实际跨 2 栏（线 2→3 是第1栏，3→4 是第2栏）。新手常以为是“占第2、第3、第4栏”，结果错位。
更安全的写法是用 span：比如 grid-column: 2 / span 2 明确表示“从第2条线起，跨2栏”。这样即使后续增删列，定位逻辑不易崩。
- 线号从 1 开始，左侧最外边是线 1，右侧最外边是线 N+1（N 为列数）
- 用命名线（如
grid-template-columns: [start] 1fr [main] 1fr [end]）可读性更高，但调试时浏览器开发者工具默认只显示数字线号 - 跨行时同理，
grid-row: 1 / -1表示从第1行线到最后一行线，适合通栏标题
grid-area 配合命名区域写布局结构最直观
用 grid-template-areas 先定义区块名称，再让子元素用 grid-area 对应，视觉上一眼看出布局骨架。比如：
body {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
}
对应子元素写 grid-area: header、grid-area: main 即可。这种方式适合语义明确的页面结构，但要注意：所有 grid-area 名称必须严格匹配模板中字符串，大小写、空格、引号一个都不能错；缺失某区域名会导致整行模板失效，浏览器会回退为隐式网格。
- 重复使用同一区域名（如多个
"sidebar"）会让多个元素挤进同一个格子，需配合z-index控制叠层 - 响应式切换布局时，只需重写
grid-template-areas，不用动 HTML 结构 - 命名区域不支持动态计算，无法用 CSS 变量注入，真要动态得靠 JS 切换 class
真正麻烦的是嵌套 Grid —— 子元素设了 display: grid 后，它的 grid-area 只在父 Grid 的单个格子内生效，外部线号不继承。这点容易在复杂仪表盘布局里翻车。
