你想系统了解 CSS Grid 布局中容器（grid container） 的所有核心属性，我会按“布局基础→行列定义→自动布局→区域规划→间距对齐”的逻辑分类讲解，每个属性配简明用法和场景，帮你建立完整的容器属性知识体系。

一、核心前提

Grid 布局的容器属性，是作用在设置了 display: grid/display: inline-grid 的父元素上的属性，用于定义网格的整体结构、行列规则、元素排列方式等，是控制网格布局的“总开关”。

二、容器属性分类详解

1. 基础定义：开启 Grid 布局

属性	取值	作用
display	grid / inline-grid	grid：容器为块级元素，独占一行；inline-grid：容器为行内块元素，随内容行排列

示例：

/* 最基础的网格容器 */
.grid-container {
  display: grid; /* 块级网格容器（最常用） */
  width: 500px;
}

2. 核心：定义行列（网格骨架）

这是 Grid 容器最核心的属性，用于定义网格的行、列数量和尺寸。

属性	取值类型	作用
grid-template-columns	长度(px/rem)、百分比(%)、fr(弹性值)、repeat()、minmax()、auto等	定义显式列的数量和每列宽度
grid-template-rows	同上	定义显式行的数量和每行高度

常用取值示例：

.grid-container {
  display: grid;
  /* 3列：第1列100px，第2列自适应，第3列占剩余空间 */
  grid-template-columns: 100px auto 1fr;
  /* 2行：每行80px；repeat(2, 80px) 等价于 80px 80px */
  grid-template-rows: repeat(2, 80px);
  /* 进阶：minmax(最小尺寸, 最大尺寸) → 列宽最小100px，最大1fr */
  grid-template-columns: minmax(100px, 1fr) 2fr;
}

3. 兜底：自动行列规则（超出显式网格时）

当网格项超出 grid-template-columns/rows 定义的显式行列范围时，由以下属性控制自动生成的行列尺寸和排列方式。

属性	取值类型	作用
grid-auto-columns	长度、百分比、fr、minmax()等	定义自动生成列的宽度（仅作用于隐式列）
grid-auto-rows	同上	定义自动生成行的高度（仅作用于隐式行）
grid-auto-flow	row / column / row dense / column dense	控制隐式网格项的排列方向（行/列），dense 开启密集填充

示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 显式3列 */
  grid-template-rows: repeat(2, 80px);    /* 显式2行 */
  /* 自动列宽80px，自动行高60px */
  grid-auto-columns: 80px;
  grid-auto-rows: 60px;
  /* 按列排列，开启密集填充 */
  grid-auto-flow: column dense;
}

4. 可视化：区域规划

通过命名区域的方式直观定义布局，无需计算行列数。

属性	取值	作用
grid-template-areas	字符串行（区域名/.）	可视化定义网格区域，区域名需和子项的 grid-area 绑定

示例：

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  /* 3行2列：header跨2列，sidebar+main，footer跨2列 */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

5. 间距：网格项间隙

控制网格项之间的间距（不包含容器边缘）。

属性	取值	作用
grid-gap（简写）	长度（px/rem）	同时设置行列间距，等价于 grid-row-gap + grid-column-gap
grid-row-gap	长度	仅设置行与行之间的垂直间距
grid-column-gap	长度	仅设置列与列之间的水平间距

注：CSS 最新规范中，grid-gap 已简化为 gap，grid-row-gap/grid-column-gap 简化为 row-gap/column-gap，功能完全一致。

示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 行列间距均为10px；也可分开写：row-gap: 10px; column-gap: 15px; */
  gap: 10px;
}

6. 对齐：整体/内容对齐

控制网格容器内所有网格项的对齐方式，分为“容器对齐”和“内容对齐”两类。

属性	取值	作用
justify-content	start/end/center/space-between/space-around/space-evenly	网格整体在容器水平方向的对齐（容器宽度 > 网格总宽度时生效）
align-content	同上	网格整体在容器垂直方向的对齐（容器高度 > 网格总高度时生效）
justify-items	start/end/center/stretch	所有网格项在单元格水平方向的对齐（默认stretch，占满单元格）
align-items	同上	所有网格项在单元格垂直方向的对齐（默认stretch）
place-content	align-content justify-content	简写属性，先垂直后水平
place-items	align-items justify-items	简写属性，先垂直后水平

示例：

.grid-container {
  display: grid;
  width: 500px;
  height: 400px;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 80px);
  /* 网格整体水平居中，垂直居中 */
  justify-content: center;
  align-content: center;
  /* 网格项在单元格内水平左对齐，垂直居中 */
  justify-items: start;
  align-items: center;
}

三、容器属性使用顺序（新手建议）

实际开发中，推荐按以下顺序设置容器属性，逻辑更清晰：

1. 开启 Grid：display: grid；
2. 定义显式行列：grid-template-columns/rows；
3. 设置间距：gap；
4. （可选）定义区域：grid-template-areas；
5. （可选）设置自动行列规则：grid-auto-columns/rows、grid-auto-flow；
6. （可选）调整对齐方式：justify-content/align-items 等。

总结

1. Grid 容器属性是网格布局的核心，分为基础定义、行列定义、自动规则、区域规划、间距、对齐六大类；
2. grid-template-columns/rows 是构建网格骨架的核心，fr/repeat()/minmax() 是高频实用取值；
3. grid-auto-* 系列属性是“兜底规则”，仅作用于超出显式网格的隐式行列；
4. 对齐属性分两层：justify/align-content 控制网格整体，justify/align-items 控制网格项在单元格内的对齐；
5. 实际开发中，优先用显式行列+间距搭建基础，再根据需求补充自动规则和对齐方式。