正在加载...

CSS Grid 项目

Grid 容器课管好了父级——轨道、gap 与单元格默认值。Grid 项目回答另一个问题：每个子元素如何占线、跨轨道，并改写自己单元格内的对齐？在命名区域之前，先掌握按线放置。

Grid 项目工具箱

📊 Grid 项目一览

属性	日常作用
`grid-column`	设置项目的列起止线（简写）
`grid-row`	设置项目的行起止线（简写）
`span`	从起始线起跨过 N 条轨道
`justify-self`	覆盖单个项目的 `justify-items`（inline 轴）
`align-self`	覆盖单个项目的 `align-items`（block 轴）
`place-self`	`align-self` + `justify-self` 的简写

Grid 线从起始边编号。从第 1 线到第 3 线的项目覆盖两条列轨道。先按线思考；命名区域稍后出现。

grid-column — 坐到列线上

grid-column: start / end 把子元素钉在列线之间。侧栏常占第一条轨道，主面板拿走其余部分。

列线上的侧栏

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — 跨过轨道

span 从起始线数轨道。三列棋盘上要铺满宽度的英雄区常用 grid-column: 1 / span 3。

英雄区跨三列

css

.hero {
grid-column: 1 / span 3;
}

grid-row — 坐到行线上

在 block 轴上是同一思路。把横幅钉在顶部带，或用 span 让高卡片占两条行轨道。

行线上的横幅

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

列与行一起用

当子元素需要清晰矩形时两者并用——例如跨两列一行的特色瓷砖。

特色瓷砖 span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — 单个项目，不同的单元格对齐

为单个子元素覆盖容器的 justify-items / align-items。两轴都要对齐时，place-self: center 是冷静的简写。

place-self 覆盖

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

冷静的 grid 项目习惯

先用列线与行线放置，子元素要跨多条轨道时用 span，再用 place-self 微调个别对齐。保持 DOM 顺序合理——别用打乱键盘焦点的 order 把戏。命名模板区域留给 Grid Areas 课。

命名项目角色

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

自己试试

搭两列棋盘；aside 用 grid-column: 1 / 2，main 用 2 / 3。
用 grid-column: 1 / span 3 加三列英雄区。
用 grid-row: 1 / 2 钉住横幅。
让特色瓷砖跨两列一行。
用 place-self: center 居中一枚徽章，并记下下一课的命名区域。

常见错误

把 span 或线号写在容器上而不是项目上
忘记线从 1 起，把轨道当线来数
把项目放置和父级的 justify-content 打包搞混
线放置还不稳就跳到命名 grid-template-areas
用 order 改视觉顺序却弄乱 tab/源顺序

小结

Grid 项目控制按线放置、跨轨与单项对齐
grid-column / grid-row 钉住起止线
span 从起始线跨过轨道
place-self（及 self 属性）覆盖单个子元素的单元格对齐
命名模板区域在下一课 Grid Areas

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言