正在加载...

CSS Grid 区域

Grid 项目课讲了线号与 span。命名区域提出更友好的问题：你能否用词语画出页面——header、sidebar、main、footer——并让每个子元素认领一个标签？grid-template-areas 是地图；grid-area 是图钉。

Grid 区域工具箱

📊 Grid 区域一览

属性 / 记号	日常作用
`grid-template-areas`	在容器上：带引号的行字符串为每个单元格命名
`grid-area`	在项目上：该子元素占据哪个命名区域
重复名称	相邻单元格中同一名称 = 一个跨格矩形
`.`（句点）	没有名称的空单元格
模板轨道	仍用 `grid-template-columns` / `rows` 设定尺寸

每一段引号字符串是地图的一行。行内名称以空格分隔。每一行必须列出相同数量的单元格，否则模板无效。

grid-template-areas — 画出地图

用朴素标签写出你想要的布局。经典页面外壳常常是三行上的四个命名角色。

命名页面地图

css

.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside  main"
"footer footer";
gap: 1rem;
}

grid-area — 钉住每个子元素

每个子元素从地图中选一个名称。类名可以保持 BEM 风格；Grid 读取的是区域记号。

分配命名角色

css

.shell__header { grid-area: header; }
.shell__aside  { grid-area: aside; }
.shell__main   { grid-area: main; }
.shell__footer { grid-area: footer; }

靠重复名称跨格

要拉长一个区域，就在应归属它的每个单元格写入同一个名称。区域必须保持实心矩形——不能呈 L 形。

英雄区跨满全宽

css

.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero  hero  hero"
"card1 card2 card3";
gap: 0.75rem;
}

.magazine__hero { grid-area: hero; }

用句点表示空单元格

单独的 . 标出空洞。当卡片棋盘要留出空隙又不想编造假名时很有用。

地图中的空单元格

css

.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta  gamma";
gap: 0.5rem;
}

.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }

冷静的命名区域习惯

先在 grid-template-areas 里画出地图，用 columns/rows 设定轨道尺寸，再用 grid-area 钉住子元素。名称保持简短且呈矩形。当单次放置比重写整张地图更清楚时，退回 grid-column / grid-row。地图的响应式改写留给 Grid Responsive 课。

带轨道的命名外壳

css

.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}

.page__nav { grid-area: nav; }
.page__content { grid-area: content; }

自己动手试

用 grid-template-areas 画出 header / aside+main / footer 地图。
用匹配的 grid-area 值分配四个子元素。
做三列英雄区，在第一行重复 hero。
在二乘二棋盘上用 . 留一个空单元格。
把轨道尺寸留在容器上；记下地图互换留给下一课响应式 Grid。

常见错误

为 L 形或不连续区域命名（区域必须是矩形）
引号行之间单元格数量不一致
把 grid-template-areas 写在子元素而不是容器上
把区域名当成 CSS 类选择器——它们是模板记号
丢掉 grid-template-columns / rows，指望单靠名称设定尺寸

小结

命名区域把布局变成可读的单元格地图
grid-template-areas 在容器上；grid-area 在每个项目上
重复名称以 span；用 . 表示空单元格
保持区域为矩形，并把名称与轨道尺寸配对
按线放置仍然可用；响应式地图改动下一课再讲

🧠 测试您的知识

准备开始

测试您的知识

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

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

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

语言