Grid 进阶与 subgrid

约 356 字大约 1 分钟

布欧-Lewyon

2026-05-16

首页 › CSS › 布局 › Grid 进阶与 subgrid

auto-fill vs auto-fit

/* auto-fill：尽可能填满，可能留空 */
.fill {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
/* 容器 350px，每个最少 100px → 可放 3 列，剩余 50px 空着 */

/* auto-fit：收缩空列，子项拉伸 */
.fit {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* 容器 350px → 3 列，但空列被收缩，实际子项平分 */

对齐属性

/* 项目在单元格内的对齐 */
.item {
  justify-self: center;   /* 水平居中 */
  align-self: center;     /* 垂直居中 */
  place-self: center;     /* 简写 */
}

subgrid

子网格继承父网格的列/行轨道：

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.child {
  display: grid;
  grid-column: 1 / -1;      /* 占满所有列 */
  grid-template-columns: subgrid;  /* 继承父级的列轨道 */
}

典型场景：列表中每个卡片内部需要对齐多行文字，subgrid 让卡片内部的元素自动对齐到父网格的列线上。

命名网格线

.grid {
  display: grid;
  grid-template-columns:
    [main-start] 1fr [content] 2fr 1fr [main-end];
}

.item {
  grid-column: main-start / main-end;
}

小结

属性/特性	作用
`auto-fill` vs `auto-fit`	是否收缩空列
`place-self`	单独对齐
`subgrid`	子网格继承父网格轨道
命名网格线	更语义化的列/行引用