Grid布局完整属性查询手册

一、Grid 基础概念

核心： 设置 display: grid 的元素称为 Grid容器（父容器），容器内直接子元素自动成为 Grid项目（子项）

网格线：划分网格的分界线（水平/垂直），可通过数字/名称定位
网格轨道：两条相邻网格线之间的区域（行轨道/列轨道）
网格单元格：行轨道和列轨道交叉形成的最小单位
网格区域：由多个相邻单元格组成的矩形区域

二、Grid 容器属性（父元素使用）

属性名	作用说明	常用取值
display	开启网格布局	grid / inline-grid
grid-template-columns	定义列轨道的宽度和数量	100px / 1fr / auto / repeat(3, 1fr) / minmax(100px, 1fr)
grid-template-rows	定义行轨道的高度和数量	100px / 1fr / auto / repeat(2, 80px) / minmax(50px, auto)
grid-template-areas	通过命名网格区域布局	"header header" "sidebar main" "footer footer"
grid-template	复合简写：rows + columns + areas	repeat(2, 80px) / repeat(3, 1fr)
grid-column-gap/column-gap	列轨道之间的间距	10px / 1rem / 2vw
grid-row-gap/row-gap	行轨道之间的间距	10px / 1rem / 2vw
grid-gap/gap	复合简写：row-gap + column-gap	10px 20px / 1rem
justify-items	单元格内项目沿行轴（水平）对齐	stretch / start / end / center
align-items	单元格内项目沿列轴（垂直）对齐	stretch / start / end / center
place-items	复合简写：align-items + justify-items	center / start end
justify-content	整个网格容器在行轴的对齐方式（网格总尺寸<容器尺寸时生效）	start / end / center / space-between / space-around / space-evenly
align-content	整个网格容器在列轴的对齐方式（网格总尺寸<容器尺寸时生效）	start / end / center / space-between / space-around / space-evenly
place-content	复合简写：align-content + justify-content	center / space-around start
grid-auto-columns	隐式列轨道的默认宽度	100px / 1fr / minmax(80px, 1fr)
grid-auto-rows	隐式行轨道的默认高度	80px / 1fr / minmax(50px, auto)
grid-auto-flow	隐式网格的排列方式	row / column / row dense / column dense
grid	终极简写：包含所有网格容器属性	auto-flow / repeat(2, 1fr) / 100px auto

容器属性细分详解

1. display

display: grid：块级网格容器，独占一行
display: inline-grid：行内网格容器，与同行元素并排

2. grid-template-columns/grid-template-rows 轨道尺寸

固定值：px/rem/cm 等固定单位，如 100px 200px
fr 单位：按比例分配剩余空间，如 1fr 2fr（2:1分配）
auto：自动适配内容/容器尺寸
repeat()：重复生成轨道，如 repeat(3, 1fr) = 1fr 1fr 1fr
minmax()：限制轨道尺寸范围，如 minmax(100px, 1fr)（最小100px，最大1fr）
命名网格线：[col1-start] 1fr [col1-end col2-start] 2fr [col2-end]

3. grid-template-areas 网格区域命名

用字符串命名区域，每行一个引号，空单元格用 . 表示
示例："header header header" "sidebar main main" "footer footer ."
需配合子项 grid-area 使用

4. gap（间距）

column-gap：列间距，grid-column-gap 是旧版写法（兼容）
row-gap：行间距，grid-row-gap 是旧版写法（兼容）
gap: 行间距列间距; 简写，如 gap: 15px 20px

5. justify-items/align-items（单元格内项目对齐）

stretch：默认，项目拉伸填满单元格
start：项目靠单元格起始边
end：项目靠单元格结束边
center：项目在单元格居中

6. place-items（复合对齐）

语法：place-items: align-items justify-items; 单值时两者共用，如 place-items: center

7. justify-content/align-content（整个网格对齐）

当网格总尺寸小于容器尺寸时，控制整个网格在容器内的对齐方式，取值同 Flex 的同名属性

8. grid-auto-flow（隐式网格排列）

row：默认，按行填充，超出自动生成行轨道
column：按列填充，超出自动生成列轨道
dense：紧凑填充，填补空白单元格（可能打乱顺序）

三、Grid 项目属性（子元素使用）

属性名	作用说明	取值规则
grid-column-start	项目起始列网格线	数字 / 网格线名称
grid-column-end	项目结束列网格线	数字 / 网格线名称 / span 数字（跨几列）
grid-column	复合简写：start / end	1 / 3 / 1 / span 2 / col1-start / col2-end
grid-row-start	项目起始行网格线	数字 / 网格线名称
grid-row-end	项目结束行网格线	数字 / 网格线名称 / span 数字（跨几行）
grid-row	复合简写：start / end	2 / 4 / 1 / span 3 / row1-start / row3-end
grid-area	复合简写：row-start / column-start / row-end / column-end 或网格区域名称	header / 1 / 2 / 3 / 4
justify-self	单独设置项目在行轴对齐，覆盖justify-items	stretch / start / end / center
align-self	单独设置项目在列轴对齐，覆盖align-items	stretch / start / end / center
place-self	复合简写：align-self + justify-self	center / end start

子项属性细分详解

1. grid-column/grid-row（跨列/跨行）

跨列：grid-column: 1 / 3（从第1列线到第3列线，跨2列）
跨行：grid-row: 2 / span 2（从第2行线开始，跨2行）
网格线名称：grid-column: col1-start / col2-end

2. grid-area（区域定位）

方式1（命名）：grid-area: header（对应容器grid-template-areas的header）
方式2（坐标）：grid-area: 1 / 2 / 3 / 4（row-start / column-start / row-end / column-end）

3. justify-self/align-self（单独对齐）

单个项目自定义单元格内对齐方式，优先级高于容器的justify-items/align-items

4. place-self（复合单独对齐）

语法：place-self: align-self justify-self; 单值时两者共用，如 place-self: center

四、完整可运行 Grid 演示示例（全属性分行+逐行注释）

/* ========== Grid容器（父盒子）全部属性 ========== */
.grid-box {
    display: grid;                /* 开启网格布局，块级容器 */
    grid-template-columns: repeat(3, 1fr); /* 3列，每列1fr */
    grid-template-rows: minmax(80px, auto) 100px 80px; /* 3行，第一行最小80px，第二行固定100px，第三行80px */
    grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; /* 命名网格区域 */
    gap: 15px 20px;               /* 行间距15px，列间距20px */
    justify-items: center;          /* 单元格内项目水平居中 */
    align-items: center;            /* 单元格内项目垂直居中 */
    justify-content: center;       /* 网格整体水平居中（容器有剩余空间时） */
    align-content: center;         /* 网格整体垂直居中（容器有剩余空间时） */
    grid-auto-rows: 80px;            /* 隐式行轨道默认高度80px */
    grid-auto-flow: row;            /* 按行填充隐式网格 */
    width: 800px;
    height: 450px;
    border: 2px solid #2256a8;
    padding: 20px;
}

/* ========== Grid项目（子盒子）基础样式 ========== */
.grid-item {
    width: 100%;
    height: 100%;
    background: #4080ff;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 22px;
}

/* ========== 自定义网格项目定位 ========== */
.item-header {
    grid-area: header;              /* 对应容器命名的header区域 */
    background: #2d5eff;
}
.item-sidebar {
    grid-column: 1 / 2;          /* 列从1到2（第1列） */
    grid-row: 2 / 3;              /* 行从2到3（第2行） */
    background: #537dff;
}
.item-main {
    grid-area: main;                /* 对应容器命名的main区域 */
    justify-self: start;          /* 单独设置水平左对齐，覆盖容器justify-items */
    background: #6b93ff;
}
.item-footer {
    grid-column: 1 / span 3;      /* 从第1列线开始，跨3列 */
    grid-row: 3 / 4;              /* 行从3到4（第3行） */
    align-self: end;            /* 单独设置垂直底部对齐，覆盖容器align-items */
    background: #1e4bd8;
}
.item-special {
    grid-column: 2 / 4;          /* 列从2到4（跨2列） */
    grid-row: 4 / 5;              /* 隐式行，第4行 */
    place-self: center;          /* 单独设置水平+垂直居中 */
    background: #ff6b6b;
}
        

配套HTML结构（分行清晰）

<div class="grid-box">
    <div class="grid-item item-header">头部</div>
    <div class="grid-item item-sidebar">侧边栏</div>
    <div class="grid-item item-main">主内容</div>
    <div class="grid-item item-footer">底部</div>
    <div class="grid-item item-special">特殊项（隐式行）</div>
</div>
        

页面实时演示效果

头部

主内容

底部

特殊项（隐式行）

五、高频Grid实用简写速查

水平垂直居中（容器）：display:grid; place-items:center;
等分布局（3列）：grid-template-columns: repeat(3, 1fr);
响应式列（最小200px，自动换行）：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
跨行跨列：grid-column: 1 / span 2; grid-row: 1 / span 3;
网格区域布局：容器 grid-template-areas: "a b" "c d"; + 子项 grid-area: a;
固定行高+自适应列：grid-template-rows: 60px 1fr 60px; grid-template-columns: 200px 1fr;

Grid 网格布局完整属性查询手册

一、Grid 基础概念

二、Grid 容器属性（父元素使用）

容器属性细分详解

1. display

2. grid-template-columns/grid-template-rows 轨道尺寸

3. grid-template-areas 网格区域命名

4. gap（间距）

5. justify-items/align-items（单元格内项目对齐）

6. place-items（复合对齐）

7. justify-content/align-content（整个网格对齐）

8. grid-auto-flow（隐式网格排列）

三、Grid 项目属性（子元素使用）

子项属性细分详解

1. grid-column/grid-row（跨列/跨行）

2. grid-area（区域定位）

3. justify-self/align-self（单独对齐）

4. place-self（复合单独对齐）

四、完整可运行 Grid 演示示例（全属性分行+逐行注释）

配套HTML结构（分行清晰）

页面实时演示效果

五、高频Grid实用简写速查