跳到主要内容

Grid 基础概念

建立 Grid 容器​

给元素设置 display: grid 或 display: inline-grid 后，它的直接子元素会成为 Grid Item。

.container {
  display: grid;
}
值容器自身的表现典型用途
grid块级，独占一行，宽度默认撑满父级页面布局、卡片列表
inline-grid行内级，能和文字并排，宽度由内容决定嵌在文本流里的小组件、徽标

用一个 3×2 网格看懂所有术语​

<div class="demo">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div><div>F</div>
</div>
.demo {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 3 列 */
  grid-template-rows: 60px 60px;            /* 2 行 */
  gap: 10px;
}

对照这个例子理解术语：

术语定义在例子中指什么数量
Grid Container设置了 display: grid 的容器.demo1 个
Grid Item容器的直接子元素A~F 六个 div6 个
Grid Line划分网格的线竖线 14、横线 134 条 + 3 条
Grid Track两条相邻网格线之间的空间（一行或一列）每列 100px、每行 60px3 列 + 2 行
Grid Cell一行与一列交叉的最小单元格A 所在的那一格6 个
Grid Area一个或多个单元格组成的矩形区域例如 A+B 合并的矩形任意矩形组合
Gap轨道之间的间距，不出现在容器外围10px 的缝列间 2 道、行间 1 道

📏 线的数量 = 轨道数量 + 1。3 列有 4 条竖线。所以「占满整行」要写 grid-column: 1 / 4，而不是 1 / 3。更稳妥且不用数数的写法是 grid-column: 1 / -1。

正数编号 vs 负数编号​

对上面的 3 列网格：

线号（正）:  1     2     3     4
            |  A  |  B  |  C  |
线号（负）: -4    -3    -2    -1
  • grid-column: 1 / 3 → 占据 A、B 两列（结束线本身不算在内）。
  • grid-column: 2 / -1 → 从第 2 条线到最后一条线，占据 B、C 两列。
  • 负数编号只对显式网格生效，浏览器自动生成的隐式轨道不参与负数计数。

显式网格与隐式网格​

  • 显式网格：你通过 grid-template-columns / grid-template-rows / grid-template-areas 亲手定义的轨道。
  • 隐式网格：元素放不下时，浏览器自动补出来的轨道。
<style>
  .g {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 只定义了列 */
    gap: 8px;
  }
  .g > div { background: #eef2ff; padding: 16px; text-align: center; }
</style>
<div class="g">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div>
</div>

第 4、5 个元素没有对应的显式行，浏览器会自动创建一行隐式行来容纳它们——这就是隐式网格最常见的出现方式。隐式轨道的尺寸用 grid-auto-rows / grid-auto-columns 控制。

只有「直接子元素」才是 Grid Item​

<div class="container">
  <div class="item">我是 Grid Item</div>
  <div class="item">
    <p>我不是 Grid Item，我只是普通的块级元素</p>
  </div>
</div>

想让那个 p 也参与网格排列，只有两条路：

  1. 把它提升为容器的直接子元素；
  2. 给外层 .item 也设置 display: grid 形成嵌套网格，必要时用 subgrid 复用父级轨道。

🚫 几个容易踩坑的例外：position: absolute / fixed 的子元素会脱离网格流，不参与自动放置；直接写在容器里的裸文本会被包装成一个匿名 Grid Item；display: contents 的子元素自身不生成盒子，它的孩子会直接成为 Grid Item。

小结：写 Grid 时的思考顺序​

  1. 这块布局有几行几列？→ grid-template-columns / grid-template-rows
  2. 轨道之间留多少缝？→ gap
  3. 哪些元素需要跨行跨列？→ grid-column / grid-row / grid-template-areas
  4. 元素在格子里怎么对齐？→ align-items / justify-items / place-self
  5. 内容数量不固定时多出来的那些怎么办？→ grid-auto-rows / grid-auto-flow