网格容器是显式声明 display: grid 或 inline-grid 的父元素，仅对其直接子元素生效，定义网格坐标系，子元素自动按源顺序填入形成网格项。
什么是网格容器？display: grid 是唯一入口
网格容器就是你加了 display: grid 或 display: inline-grid 的那个父元素。它不是“看起来像网格”就成立，而是必须显式声明——漏掉这行，后面所有 grid-template-columns、gap 都无效。
- 只对**直接子元素**生效：孙子元素不会自动变成网格项，也不会继承网格行为
-
display: grid默认是块级（占满一行），display: inline-grid是行内级（宽度由内容撑开） - 别用
display: grid套在或其他行内元素上再指望它“变宽”——它会按块级渲染，但语义和流式布局可能出问题
网格项怎么才算“真正加入网格”？
网格项 = 网格容器的**直接子元素**，且不被 display: none 或 visibility: hidden 隐藏（后者仍占位）。它不需要额外声明，只要在容器里，就自动获得网格坐标位置。
- 即使没写
grid-column或grid-row，它也会按源顺序（html 顺序）从左到右、从上到下自动填入空单元格（即“自动流”） - 如果某个子元素设置了
Float、position: absolute或display: contents，它就**退出网格项身份**，不再参与自动布局 -
display: contents尤其容易踩坑：它会让元素“消失”于渲染树，子元素直接冒泡成网格项——但语义结构已破坏，可访问性与 dom 操作都会受影响
为什么网格线编号从 1 开始？
因为 css Grid 把整个容器边界也当作网格线：最左边是列线 1，最右边是列线 N+1；最顶是行线 1，最底是行线 M+1。这种设计让定位更直观——比如 grid-column: 1 / -1 表示“从第一根列线到最后一根列线”，即跨满整行。
- 负值是合法的：
-1指最外侧那条线（不是“倒数第一格”，是“最外边那条线”） - 命名线更安全：用
grid-template-columns: [start] 1fr [main] 2fr [end]后，写grid-column: start / end就不怕数错数字 - 调试时打开浏览器开发者工具的“Layout”面板，勾选“Show line numbers”，能实时看到每条线编号
grid-template-columns 和 grid-template-rows 不写会怎样？
如果不设，浏览器会按“单列自动流”处理：所有项目堆成一列，行高由内容决定，列宽默认为 auto（即最小内容宽）。这不是错误，但几乎不是你想要的二维布局。
立即学习“前端免费学习笔记（深入）”；
- 哪怕只想让三块卡片横排，也至少要写
grid-template-columns: repeat(3, 1fr)，不能依赖默认 -
auto≠1fr：auto是内容宽度，1fr是剩余空间均分，混用时容易导致列宽意外收缩或溢出 - 响应式常用组合：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))—— 它依赖容器宽度自动算列数，但前提是容器本身有明确宽度（比如带max-width的div）
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .item { /* 不需要任何 grid-* 定位，自动填入 */ padding: 12px; background: #eef; }网格容器和网格项的关系，本质是一次“声明即绑定”：容器定义坐标系，项目天然落点。最容易被忽略的，其实是容器的 display 声明是否真正生效——检查元素 computed styles 里的 display 值，比猜逻辑更可靠。