Grid 容器属性详解

容器属性地图

类别	属性
模板	grid-template-columns / rows / areas
简写	grid-template、grid
间隙	gap / row-gap / column-gap
隐式网格	grid-auto-columns / rows / flow
对齐	justify-items / align-items / place-items
轨道整体	justify-content / align-content / place-content

---

grid-template-columns / rows

定义显式列/行轨道。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 1fr auto;
}

常用轨道尺寸

写法	含义
px / rem / %	固定或相对长度
fr	剩余空间弹性份数
auto	由内容/最大内容等决定
min-content / max-content	内容最小/最大理想尺寸
minmax(a, b)	夹在 a~b
fit-content(200px)	类似 min(max-content, max(min-content, 200px))
repeat(n, …)	重复轨道定义

repeat 与响应式

/* 固定 4 列 */
grid-template-columns: repeat(4, 1fr);

/* 自动填满：列宽至少 240px，能放几列放几列 */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

/* 自动适配：必要时拉伸列以吃掉尾部空轨 */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

• auto-fill：即使后面是空的，也尽量保留「可能的空列」结构
• auto-fit：空列会被折叠，已有列可伸展填满

多数卡片墙用 auto-fit + minmax 更直观。

---

grid-template-areas

用名字画结构，必须构成矩形区域。

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  gap: 0;
  min-height: 100vh;
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

• . 表示空单元格
• 同一名字必须形成矩形，不能 L 形

媒体查询里可直接重排 areas，非常适合响应式骨架。

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

---

gap

.container {
  gap: 16px;
  /* row-gap column-gap */
  gap: 12px 24px;
}

gap 不增加边缘外边距；比用 margin 模拟轨道间距更干净。Grid 的 gap 支持早于 Flex，兼容性通常更好（见兼容性篇）。

---

隐式网格

项目超出显式轨道时，会创建隐式行/列。

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: row; /* 默认按行填充 */
}

grid-auto-flow	行为
row	逐行放（默认）
column	逐列放
row dense / column dense	尽量回填空洞

dense 可能打乱视觉源顺序，注意无障碍。

---

对齐：items vs content

项目在单元格内（items）

.container {
  justify-items: stretch; /* 水平，默认 stretch */
  align-items: stretch;   /* 垂直，默认 stretch */
  place-items: center;    /* align + justify 简写 */
}

常用值：start | end | center | stretch。

整个网格在容器内（content）

当网格总尺寸小于容器时：

.container {
  justify-content: center;
  align-content: start;
  place-content: start center;
}

取值类似 Flex 的 content 分布：space-between、space-around 等。

---

命名网格线

.container {
  grid-template-columns: [full-start] 1fr [main-start] 640px [main-end] 1fr [full-end];
}
.item {
  grid-column: main-start / main-end;
}

便于与设计系统的「内容最大宽 + 全宽通栏」模式配合。

---

实用模式

圣杯 / 后台框架

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "nav top"
    "nav body";
  height: 100vh;
}

响应式卡片

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}

min(100%, 260px) 可避免小屏下 minmax 最小轨道导致溢出。

十二栏系统（简化）

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }

---

速记

1. 先定轨道：template-columns/rows 或 areas
2. 再定缝：gap
3. 溢出轨道靠 auto-rows/columns + auto-flow
4. 单元格内对齐用 *-items，网格在容器内对齐用 *-content