CSS: Grid 项目与对齐
在 Grid 布局中，你可以精确控制每个子元素放在哪个网格单元，以及子元素在网格单元内的对齐方式。
Grid 项目属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
grid-column |
1 / 3, span 2, 1 / -1 |
控制项目跨越哪些列 |
grid-row |
1 / 2, span 3 |
控制项目跨越哪些行 |
grid-area |
header, 1 / 1 / 3 / 4 |
项目区域（可配合 grid-template-areas 命名） |
justify-self |
stretch, start, end, center |
项目自身在列方向的对齐 |
align-self |
stretch, start, end, center |
项目自身在行方向的对齐 |
order |
0, 1, -1 |
项目排列顺序（数值越小越靠前） |
1. 项目放置
在定义好网格后，你可以使用以下属性将项目放置到指定的网格位置：
(1) grid-column 和 grid-row
▶ 示例
HTML
<style>
.item1 {
grid-column: 1 / 3; /* 从第1列线到第3列线，跨2列 */
grid-row: 1 / 2; /* 从第1行线到第2行线，占1行 */
}
.item2 {
grid-column: 2 / 4; /* 从第2列线到第4列线 */
grid-row: 1 / 3; /* 从第1行线到第3行线，跨2行 */
}
</style>
<div class="item1">Item1</div>
<div class="item2">Item2</div>
网格线编号：网格的线从 1 开始编号。1 / 3 表示从第 1 条线到第 3 条线，占据中间 2 列。
(2) 使用 span 关键字
▶ 示例
HTML
<style>
.item {
grid-column: span 2; /* 跨2列 */
grid-row: span 3; /* 跨3行 */
}
/* 等价于 */
.item {
grid-column: 1 / span 2; /* 从第1列开始，跨2列 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
<span>内联文本</span>
<span>内联文本</span>
<span>内联文本</span>
(3) 使用简写
▶ 示例
HTML
<style>
.item {
grid-area: 1 / 1 / 3 / 3;
/* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
/* 从第1行第1列到第3行第3列 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
2. 项目对齐
(1) 容器上的对齐属性（作用于所有项目）
justify-items： 水平方向对齐（在单元格内）
▶ 示例
HTML
<style>
.container {
justify-items: start; /* 左对齐 */
justify-items: end; /* 右对齐 */
justify-items: center; /* 居中 */
justify-items: stretch; /* 拉伸填满（默认） */
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
align-items： 垂直方向对齐（在单元格内）
▶ 示例
HTML
<style>
.container {
align-items: start; /* 顶部对齐 */
align-items: end; /* 底部对齐 */
align-items: center; /* 垂直居中 */
align-items: stretch; /* 拉伸填满（默认） */
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
place-items： 简写
▶ 示例
HTML
<style>
.container {
place-items: center; /* 水平和垂直都居中 */
place-items: start center; /* 水平居中，顶部对齐 */
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
<span class="demo-start">起始位置</span>
(2) 项目上的对齐属性（作用于单个项目）
justify-self： 单个项目水平对齐（覆盖容器 justify-items）
▶ 示例
HTML
<style>
.item {
justify-self: start;
justify-self: end;
justify-self: center;
justify-self: stretch;
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
align-self： 单个项目垂直对齐（覆盖容器 align-items）
▶ 示例
HTML
<style>
.item {
align-self: start;
/* 自身对齐 */
align-self: end;
align-self: center;
align-self: stretch;
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
place-self： 简写
▶ 示例
HTML
<style>
.item {
place-self: center; /* 单个项目居中 */
}
</style>
<div class="item">项目元素，表示列表或布局中的一个项</div>
3. 容器上的整体对齐
当网格的总尺寸小于容器尺寸时，可以用以下属性控制网格整体的位置：
justify-content： 水平方向整体对齐
▶ 示例
HTML
<style>
.container {
justify-content: start; /* 左对齐 */
justify-content: end; /* 右对齐 */
justify-content: center; /* 居中 */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
align-content： 垂直方向整体对齐
▶ 示例
HTML
<style>
.container {
align-content: start;
/* 多行对齐 */
align-content: end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
place-content： 简写
▶ 示例
HTML
<style>
.container {
place-content: center; /* 网格整体居中 */
}
</style>
<div class="container">容器元素，内部包含其他子元素</div>
4. 命名网格区域
(1) grid-template-areas
你还可以给网格区域"命名"，然后通过名称放置项目：
▶ 示例
HTML
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 10px;
height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
.container-item {
background: #e8f4f8;
border: 1px solid #3498db;
padding: 16px;
margin: 4px;
border-radius: 4px;
text-align: center;
}
</style>
<div class="container">
<div class="container-item">Container item</div>
<div class="container-item">Container item</div>
<div class="container-item">Container item</div>
</div>
这种方法非常直观，适合整体页面布局。
5. 综合示例
▶ 示例
HTML
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
/* 第一个项目占左上角2×2格 */
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
background: #e74c3c;
color: white;
}
/* 第三个项目跨2列 */
.item3 {
grid-column: span 2;
justify-self: center;
align-self: center;
}
.grid-item {
background: #e8f4f8;
border: 1px solid #3498db;
padding: 16px;
margin: 4px;
border-radius: 4px;
text-align: center;
}
</style>
<div class="grid">
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
<div class="grid-item">Grid item</div>
</div>
❓ 常见问题
Q grid-column: 1 / -1 是什么意思？
A 表示从第 1 条网格线跨越到最后 1 条网格线（-1 是最后一条线的编号），即占满整行。非常适合做全宽的标题行或分隔行，不需要知道总共有多少列。
Q Grid 项目可以重叠吗？
A 可以。Grid 允许项目占据相同的网格区域，后面的项目会覆盖在前面的上面。可以利用这个特性做叠加效果，比如文字叠在图片上。用 z-index 控制叠放顺序。
Q span 关键字怎么用？
A
grid-column: span 2 表示"跨 2 列"，比写网格线编号更直观。不需要知道从哪条线开始，浏览器会自动计算。特别适合在不知道具体列数的响应式场景中使用。📖 小节
- Grid 的项目放置非常灵活——你可以精确指定每个项目从哪条网格线开始、到哪条网格线结束，或者用
span关键字跨多行/多列 - 在单元格内部，
justify-items/align-items控制整体对齐，justify-self/align-self控制单个元素对齐 - 如果感觉线编号不好记，可以试试用
grid-template-areas给区域命名，更加直观
📝 作业
- 创建一个 4×4 网格，将一个项目放置在从第 2 列第 2 行开始、跨 2 列 2 行的位置。
- 使用
grid-template-areas创建一个完整的页面布局：头部（跨2列）、侧栏、内容区、底部（跨2列）。 - 在网格容器中让所有项目水平和垂直居中（使用
place-items: center）。 - 让网格中的第三个项目单独在单元格内靠右下角对齐（使用
justify-self和align-self）。
