网格容器必须显式声明display: grid，否则grid-template-columns和grid-template-rows无效；fr单位代表剩余空间等分比例，非像素；间隙统一用gap而非margin；项目定位优先使用grid-column/grid-row线号控制。
网格容器必须显式声明 display: grid
不设置这个，grid-template-columns 和 grid-template-rows 完全无效。常见错误是只写列定义却忘了加 display，结果元素仍按文档流排列。
- 行内元素（如
）不能直接设为grid，需先转为块级或使用display: inline-grid - Flexbox 容器里嵌套 Grid 容器没问题，但反过来不行——Grid 项内部默认不是 Grid 容器，需单独声明
- 旧版 IE 不支持
display: grid，若需兼容，得用Float或inline-block回退方案
grid-template-columns 中的 fr 单位不是像素
fr 是“fraction”，代表剩余可用空间的等分比例，和 px、% 行为完全不同。比如 1fr 2fr 表示两列按 1:2 占据容器剩余宽度，而非固定尺寸。
- 混合单位可行：
200px 1fr 2fr auto—— 第一列固定 200px，第二三列按比例分剩余空间，第四列由内容撑开 -
auto不等于fit-content：前者按最小内容宽，后者会收缩到刚好容纳内容（含 padding） - 用
minmax(200px, 1fr)可防列过窄，比单纯写1fr更健壮
行列间距用 gap，不是 margin
Grid 项之间加间隙，应统一用容器上的 gap（或 row-gap/column-gap），而非给每个子项设 margin。后者会导致外边距合并、响应式错位、难以对齐等问题。
/* 推荐 */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } / 不推荐（尤其在响应式中） / .grid-item { margin: 8px; }
-
gap不影响容器的padding，它只作用于网格轨道之间的空隙 - 在
grid-auto-flow: column场景下，row-gap依然控制行间距离，column-gap控制列间距离，方向不随流向改变 - firefox 早期版本对
gap支持不全，可加grid-row-gap/grid-column-gap作为前缀兼容
用 grid-column 和 grid-row 精确控制项目位置
网格项默认按源顺序自动填充，但真正灵活布局靠的是显式定位。例如让一个标题横跨三列，或让侧边栏固定在右下角。
立即学习“前端免费学习笔记（深入）”；
.header { grid-column: 1 / -1; /* 从第一列线到最后一列线，即全宽 */ } .sidebar { grid-row: 2 / -1; /* 从第二行线到底部，占满剩余行高 */ grid-column: -2 / -1; /* 倒数第二列线到最后一列线，即最右一列 */ }- 起始/结束值可以是数字（
2 / 4）、关键字（span 2）、负数（-2表示倒数第 2 条线） -
span是跨距，不是跨度数量：grid-column: 2 / span 3表示从第 2 条线开始，跨越 3 个轨道（即占 3 列） - 避免用
grid-area写死命名区域（如"header"）后又混用线号定位，容易冲突且难调试
实际项目中最容易被忽略的是：网格线编号依赖于 grid-template-areas 或显式轨道定义。如果只用 auto-fit + repeat()，但没设 minmax()，某些屏幕下轨道可能坍缩成 0，导致 grid-column: 2 / -1 失效。这时候得回退到 grid-column-start + grid-column-end 分开写，并配合 @supports 检测。