网格容器是开启Grid布局的父元素，需设置display: grid或inline-grid；网格项目是其直接子元素，仅限一层，二者职责分明：容器定义轨道与规则，项目负责定位与对齐。
什么是网格容器（Grid Container）
网格容器就是你主动“开启 Grid 布局”的那个父元素，只需给它加 display: grid（或 display: inline-grid），它就正式成为容器。所有直接子元素会自动被纳入网格系统，不再受 float、inline-block、vertical-align 等老式布局属性影响——这些属性在容器上直接失效。
- 它默认是块级元素（
display: grid），宽度占满父容器；若想行内表现，用display: inline-grid - 容器本身不参与网格排列，它只负责划分轨道、定义规则
- 常见错误：给容器设了
grid-template-columns却没生效 → 检查是否漏写了display: grid，这是前提，不是可选步骤
什么是网格项目（Grid Item）
网格项目就是容器的**直接子元素**，也就是 HTML 中紧贴在容器标签内的那一层元素。它们是 Grid 布局真正要排布的“内容单元”，但仅限这一层——孙子辈、曾孙辈元素完全不在 Grid 的管辖范围内，它们的行为由自身父元素（即某个网格项目）决定。
- 例如：
<div class="container"> <div class="item">我是项目</div> <p>我也是项目</p> <section> <span>我不是项目，我是孙子</span> </section> </div>只有<div class="item">和<p>是网格项目 - 项目一旦生成，就能用
grid-column、grid-row、grid-area等属性精准定位，但这些属性只能写在项目自身上，不能写在容器上 - 容易踩的坑：试图对项目内部的子元素使用
justify-self或align-self→ 不生效，因为这些属性只作用于项目自身在单元格内的对齐，不向下传递
容器和项目的关系为什么不能颠倒
这不是语义问题，而是 CSS 渲染机制决定的硬性规则：Grid 是一种“容器驱动型”布局，所有轨道、线、区域都由容器定义，项目只是被动接受分配的位置。反过来，如果只给子元素加 display: grid，那它自己成了新容器，它的父元素反而变成普通块元素，整个布局层级就乱了。
- 典型误用：
.item { display: grid; }→ 这会让.item变成新容器，而它里面的子元素才成为“新项目”，原意想控制的布局关系已丢失 - 正确做法始终是：先定好谁是“总调度中心”（容器），再让内容作为“执行单元”（项目）听从调度
- 兼容性提示：IE10/11 支持部分 Grid 属性但有严重 bug，如
grid-gap需用-ms-grid-column-gap等前缀；现代项目建议忽略 IE
怎么快速验证当前元素是不是容器或项目
打开浏览器开发者工具（F12），选中元素，在 Styles 面板里看是否出现 display: grid —— 有，就是容器；再看它的子元素是否在 Layout 标签页里显示“Grid”面板并可拖拽网格线 —— 能，说明它们确实是项目。
立即学习“前端免费学习笔记（深入）”；
- 如果子元素没显示 Grid 面板，大概率是它不是直接子元素，或者父容器没设
display: grid - 注意：某些框架（如 Vue 的
v-for、React 的 Fragment）可能插入匿名节点，导致你以为的“直接子元素”其实被包裹了一层，这时需检查真实 DOM 结构
