17370845950

网格容器是显式声明 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 值，比猜逻辑更可靠。