Grid Template 简写属性
grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性的简写形式。
语法格式
grid-template:
"area-names" row-height
"area-names" row-height
/ column-widths;
css
- 斜线
/前面是行的定义（包含区域名和行高） - 斜线
/后面是列的定义
基础示例
不含 grid-template-areas 的简写：
.container {
grid-template:
100px
repeat(3, 150px)
/ repeat(3, 1fr);
}
css
等价于：
.container {
grid-template-rows: 100px repeat(3, 150px);
grid-template-columns: repeat(3, 1fr);
}
css
包含 Areas 的简写
.container {
grid-template:
"a a b" 100px
"c d d" 150px
"f g h" 150px
"i j k" 150px
/ 1fr 1fr 1fr;
}
css
注意：
grid-template简写中，columns 部分不支持repeat()函数，必须展开为完整的值列表。如果使用repeat(3, 1fr)会导致invalid property value。
注意事项
- 如果在子元素上设置了
grid-area但容器中没有对应的grid-template-areas，则grid-area不会生效 - 使用
grid-template简写会重置之前设置的grid-template-rows、grid-template-columns和grid-template-areas
gap 间距属性
分属性写法
.container {
column-gap: 15px; /* 列间距 */
row-gap: 20px; /* 行间距 */
}
css
简写
.container {
/* gap: row-gap column-gap */
gap: 20px 10px;
/* 行列间距相同 */
gap: 15px;
}
css
| 属性 | 作用 | 默认值 |
|---|---|---|
row-gap | 行间距 | 0 |
column-gap | 列间距 | 0 |
gap | 上述两者的简写 | 0 |
对齐属性详解
单元格内容对齐（justify-items / align-items）
控制每个单元格内部内容的位置：
.container {
/* 水平方向：默认 start，可选 center / end / stretch */
justify-items: center;
/* 垂直方向：默认 stretch，可选 start / center / end */
align-items: center;
/* 简写 */
place-items: center center;
}
css
place-items 是 align-items 和 justify-items 的简写，语法为 place-items: <align> <justify>。
网格整体对齐（justify-content / align-content）
当网格内容未占满容器时，控制整个网格区域在容器中的位置：
.container {
/* 网格整体水平居中 */
justify-content: center;
/* 网格整体垂直居中 */
align-content: center;
/* 简写（注意：place-content 不支持 IE 浏览器） */
place-content: center;
}
css
使用场景：当列宽使用固定像素值（如 250px）而非 fr 单位时，网格可能不会占满容器，此时需要这两个属性进行整体对齐。
对齐属性速查表
| 属性 | 作用对象 | 方向 | 常用值 |
|---|---|---|---|
justify-items | 单元格内容 | 水平 | start center end stretch |
align-items | 单元格内容 | 垂直 | start center end stretch |
place-items | 上述两者的简写 | 两个方向 | <align> <justify> |
justify-content | 网格整体 | 水平 | start center end space-between |
align-content | 网格整体 | 垂直 | start center end space-between |
place-content | 上述两者的简写 | 两个方向 | <align> <justify> |
Grid Item 属性详解
grid-row-start / grid-row-end / grid-column-start / grid-column-end
通过网格线编号精确定位元素：
.item-1 {
/* 移动到第 3 行（第 3 条行线到第 4 条行线） */
grid-row-start: 3;
grid-row-end: 4;
/* 移动到第 3 列（第 3 条列线到第 4 条列线） */
grid-column-start: 3;
grid-column-end: 4;
}
css
span 关键字
span 表示从起始线开始横跨的网格线数量：
.item-1 {
/* 从第 2 条列线开始，横跨 2 条线（占据 2 个单元格） */
grid-column-start: 2;
grid-column-end: span 2;
}
css
grid-column / grid-row（简写）
.item-1 {
/* grid-column: start / end */
grid-column: 2 / span 2;
/* grid-row: start / end */
grid-row: 3 / 4;
}
css
简写属性与分属性写法等价：
/* 分属性 */
grid-column-start: 2;
grid-column-end: span 2;
/* 简写 */
grid-column: 2 / span 2;
css
定位原理
网格线编号规则：
1 2 3 4 <- 列网格线
+-------+-------+-------+
1 | | | |
+-------+-------+-------+
2 | | | |
+-------+-------+-------+
3 | | | |
+-------+-------+-------+
4 | | | |
+-------+-------+-------+
5 <- 行网格线（5 条 = 4 行）
text
- 列网格线数量 = 列数 + 1
- 行网格线数量 = 行数 + 1
- 编号从 1 开始，也可使用负数从末尾计数（
-1表示最后一条线）
实战作业：5 格图片网格
使用 5 个 Grid Item 实现课程展示的图片网格效果。
分析设计图
+---------+---------+---------+---------+
| | | Row 1
| Item 1 | Item 2 |
| (1列→4列) | (row:2 span2) |
+---------+---------+---------+---------+ Row 2
| | |
| Item 3 | Item 4 | Row 3
| +---------+---------+
| | | |
| | Item 5 | |
+---------+---------+---------+
text
实现代码
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, auto);
}
/* Item 1：第一行，横跨前 4 列 */
.item-1 {
grid-row: 1 / 2;
grid-column: 1 / span 4;
width: 100%;
height: 100%;
}
/* Item 2：从第 2 行开始，横跨 2 行 2 列 */
.item-2 {
grid-row: 2 / span 2;
grid-column: 1 / span 2;
width: 100%;
height: 100%;
}
/* Item 3：第 2 行，从第 3 列开始横跨 2 列 */
.item-3 {
grid-row: 2 / 3;
grid-column: 3 / span 2;
width: 100%;
height: 100%;
}
/* Item 4：第 3 行，第 3 列 */
.item-4 {
grid-row: 3 / span 1;
grid-column: 3 / span 1;
width: 100%;
height: 100%;
}
/* Item 5：第 3 行，第 4 列 */
.item-5 {
grid-row: 3 / span 1;
grid-column: 4 / span 1;
width: 100%;
height: 100%;
}
css
关键要点
grid-template-columns的列数应取最细粒度分割的数量（本例为 5 列）- 先分析每个元素的起始行/列和横跨数量，再编写 CSS
width: 100%; height: 100%确保元素撑满整个单元格- 使用
span关键字比手动计算结束线更直观
在线工具推荐
| 工具 | 特点 |
|---|---|
| CSS Grid Generator（在线） | 可视化拖拽生成 Grid 布局，直接复制 CSS 代码 |
| css-grid-generator (GitHub) | 可下载到本地运行，支持离线使用 |
使用在线工具的优势：
- 拖拽操作生成复杂布局，避免手动计算错误
- 提供正确的示例代码
- 开发效率大幅提升
- 支持实时预览效果
属性完整速查
Container 属性
| 属性 | 说明 | 关键值 |
|---|---|---|
display | 声明 Grid 容器 | grid / inline-grid |
grid-template-columns | 定义列 | repeat() / fr / minmax() |
grid-template-rows | 定义行 | 同上 |
grid-template-areas | 命名区域 | 字符串 + grid-area |
grid-template | 上述三者简写 | "areas" height / width |
gap | 间距 | row col |
justify-items | 内容水平对齐 | start center end |
align-items | 内容垂直对齐 | start center end |
place-items | 上述两者简写 | <align> <justify> |
justify-content | 网格水平对齐 | center space-between |
align-content | 网格垂直对齐 | center space-between |
place-content | 上述两者简写 | <align> <justify> |
Item 属性
| 属性 | 说明 | 关键值 |
|---|---|---|
grid-row-start | 起始行线 | 数字 / span n |
grid-row-end | 结束行线 | 数字 / span n |
grid-column-start | 起始列线 | 数字 / span n |
grid-column-end | 结束列线 | 数字 / span n |
grid-row | 行简写 | start / end |
grid-column | 列简写 | start / span n |
grid-area | 区域名或完整简写 | 名称 / r-s c-s r-e c-e |
↑