一、容器属性（父元素）
通过在父元素上设置 display: grid 或 display: inline-grid 启用 Grid 布局后，可使用以下属性：
1. 定义行列尺寸
grid-template-columns：定义列的数量和宽度css
.container {
/* 3列，宽度分别为 100px、200px、1fr（剩余空间） */
grid-template-columns: 100px 200px 1fr;
/* 重复 3 列，每列等宽（1fr 表示等分剩余空间） */
grid-template-columns: repeat(3, 1fr);
/* 响应式列（最小 200px，自动换行） */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
grid-template-rows：定义行的数量和高度css
.container {
/* 2行，高度分别为 100px 和 auto（自适应内容） */
grid-template-rows: 100px auto;
/* 重复 2 行，每行高度 150px */
grid-template-rows: repeat(2, 150px);
}
grid-template-areas：通过命名区域定义布局（配合项目的grid-area使用）css
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 40px;
/* 定义区域：header 占第一行全列，sidebar 占第二行第一列，main 占第二行第二列，footer 占第三行全列 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
2. 控制间距
gap（简写）：同时设置行间距和列间距css
.container {
gap: 20px; /* 行和列间距都是 20px */
gap: 10px 20px; /* 行间距 10px，列间距 20px */
}
等价于 row-gap（行间距）和 column-gap（列间距）的组合。
3. 项目排列方式
grid-auto-flow：设置项目默认排列顺序（行优先 / 列优先）css
.container {
grid-auto-flow: row; /* 默认：先填满行，再换行 */
grid-auto-flow: column; /* 先填满列，再换列 */
grid-auto-flow: row dense; /* 紧凑排列，减少空白（dense 用于自动填充空白） */
}
grid-auto-columns/grid-auto-rows：定义超出显式定义的行列尺寸
当项目数量超过grid-template-columns/grid-template-rows定义的数量时，自动创建的行列尺寸由这两个属性控制：css
.container {
grid-template-columns: 100px 100px; /* 显式定义 2 列 */
grid-auto-columns: 150px; /* 超出的列自动设为 150px 宽 */
}
4. 整体对齐
justify-content：整个网格在容器水平方向的对齐方式（网格总尺寸 < 容器尺寸时生效）css
.container {
justify-content: start; /* 默认：左对齐 */
justify-content: center; /* 居中 */
justify-content: end; /* 右对齐 */
justify-content: space-between; /* 两端对齐，中间间距相等 */
justify-content: space-around; /* 两侧间距是中间的一半 */
justify-content: space-evenly; /* 所有间距相等 */
}
align-content：整个网格在容器垂直方向的对齐方式（用法同justify-content）
5. 项目对齐
justify-items：所有项目在单元格水平方向的对齐方式css
.container {
justify-items: stretch; /* 默认：填满单元格宽度 */
justify-items: start; /* 左对齐 */
justify-items: center; /* 水平居中 */
justify-items: end; /* 右对齐 */
}
align-items：所有项目在单元格垂直方向的对齐方式（用法同justify-items）
二、项目属性（子元素）
Grid 容器的直接子元素（项目）可通过以下属性控制自身位置和尺寸：
1. 指定项目位置（跨行列）
grid-column：指定项目占据的列范围（grid-column-start/grid-column-end的简写）css
.item {
/* 从第 1 列线开始，到第 3 列线结束（占据 2 列） */
grid-column: 1 / 3;
/* 从第 2 列线开始，跨越 2 列 */
grid-column: 2 / span 2;
}
grid-row：指定项目占据的行范围（grid-row-start/grid-row-end的简写，用法同grid-column）css
.item {
/* 从第 1 行线开始，到最后一行线结束（占据所有行） */
grid-row: 1 / -1;
}
grid-area：指定项目所在的区域（配合容器的grid-template-areas使用）css
.header {
grid-area: header; /* 对应容器中定义的 "header" 区域 */
}
2. 单个项目对齐
-
justify-self：单个项目在单元格水平方向的对齐方式（覆盖容器的justify-items）css -
align-self：单个项目在单元格垂直方向的对齐方式（覆盖容器的align-items）
三、常用单位和函数
fr：剩余空间分配单位（如1fr、2fr表示按比例分配）auto：自适应内容尺寸minmax(min, max)：定义尺寸范围（如minmax(100px, 1fr)最小 100px，最大占满剩余空间）repeat(n, size)：重复创建 n 个相同尺寸的行列auto-fit/auto-fill：自动填充列数（配合minmax实现响应式换行）
四、示例：经典三栏布局
css
.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 左栏 200px，中栏自适应，右栏 200px */
grid-template-rows: 100vh; /* 高度占满视口 */
gap: 20px;
}
/* 项目定位 */
.left { grid-column: 1; }
.middle { grid-column: 2; }
.right { grid-column: 3; }
