跳到主要内容

Grid 项目属性详解

项目属性总览​

写在 Grid 项目上：

属性作用
grid-column-start / end列起止网格线
grid-row-start / end行起止网格线
grid-column / grid-row上述简写
grid-area区域名或四线简写
justify-self / align-self单元格内单项对齐
place-selfalign + justify 简写
order自动放置时的顺序权重

线号定位​

网格线从 1 开始。N 列有 N+1 条竖线。

.item {
  grid-column-start: 1;
  grid-column-end: 3;   /* 不包含第 3 条线之后的轨道，实际跨 2 列 */
  grid-row: 2 / 4;      /* 跨 2 行 */
}

简写形式​

/* start / end */
grid-column: 1 / 3;
grid-row: 2 / span 2;

/* 只写起点，默认跨 1 轨 */
grid-column: 2;

/* span */
grid-column: span 2;
grid-column: 1 / span 3;

负数线号​

-1 表示最后一条线，适合「贴右/贴底」：

.full-bleed {
  grid-column: 1 / -1; /* 横跨所有显式列 */
}

grid-area​

1. 使用 template areas 名称​

.header { grid-area: header; }

2. 四值线号简写​

/* row-start / column-start / row-end / column-end */
.item {
  grid-area: 1 / 2 / 3 / 4;
}

可读性通常不如具名 area，复杂页面优先 grid-template-areas。

跨列跨行实战​

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 12px;
}
.gallery__hero {
  grid-column: span 2;
  grid-row: span 2;
}

注意：跨轨后，后续自动放置可能产生「空洞」；可用 grid-auto-flow: dense 回填（会改变视觉顺序）。

单元格内对齐​

默认项目 stretch 拉满单元格。

.icon-cell {
  justify-self: center;
  align-self: center;
  /* 等价 */
  place-self: center;
}

.toolbar-item {
  place-self: end stretch; /* 垂直 end，水平 stretch */
}

取值：start | end | center | stretch 等。

若项目有固有宽高或 max-width，stretch 可能看不出效果。

order​

与 Flex 类似，影响自动放置顺序，不改 DOM / 无障碍顺序。

.item-late { order: 1; }
.item-first { order: -1; }

手动指定了线号的项目仍按其定位放置；order 主要影响参与自动布局的项。

与绝对定位​

position: absolute 的子项通常不按网格自动占位（不占用网格单元格流），但若容器为定位包含块，仍可相对容器定位。需要「占格」请用 grid 定位而不是 absolute（除非要重叠装饰层）。

Grid 原生支持重叠：多个项目可以定位到同一区域，再用 z-index 控制层叠。

.card-media { grid-area: 1 / 1; }
.card-overlay { grid-area: 1 / 1; place-self: end; z-index: 1; }

子网格 subgrid（进阶）​

.parent {
  display: grid;
  grid-template-columns: subgrid; /* 在子项上使用 */
}
.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid;
}

subgrid 让子级对齐父级轨道，适合卡片内部多列与外层网格严格对齐。兼容性见《Grid 浏览器兼容性》。

常见组合片段​

主内容限宽 + 偶发通栏​

.page {
  display: grid;
  grid-template-columns: 1fr min(70ch, 100%) 1fr;
}
.page > * {
  grid-column: 2;
}
.page > .breakout {
  grid-column: 1 / -1;
}

表单两列表签​

.form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}
.form .full {
  grid-column: 1 / -1;
}

调试提示​

  • DevTools 打开 Grid 徽章，查看线号与区域名
  • 混淆 start/end 时，记住 end 线是开区间边界
  • 跨度用 span 往往比硬算 end 线更稳