正在加载...

CSS 响应式 Grid

Grid Areas 教你用名称绘制页面地图。响应式 Grid 问的是：视口变窄时会发生什么？列会塌缩吗？侧栏会移到页眉下方吗？卡片能否在不写第二套 HTML 的情况下重排？几个稳妥的断点模式 — 专门的 Responsive Design 模块在后头。

响应式 grid 工具箱

📊 响应式 grid 一览

工具	日常用途
`grid-template-columns`	在 media query 里换轨道列表（如两列 → 一列）
`grid-template-areas`	当堆叠比并排更合适时重画命名地图
`repeat(auto-fit, minmax(...))`	按空间自动换行的流体卡片列，少用手动断点
Media query	仅在视口匹配时应用 grid 变更
`gap`	轨道或地图变化时保持间距节奏
避免为每种宽度加 HTML	同一 DOM；由 CSS 承担布局变化

从宽屏上已可信的 grid 出发。在一个清晰断点上改列、行或区域地图 — 不要一次改全部。上一课的名称让响应式重写更易读。

断点处改列

两列外壳在手机上要变单列时，在 media query 里改 grid-template-columns。

两列变一列

css

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

@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}

窄屏重画区域地图

header / aside / main 并排地图常在侧栏需移到页眉下时需要新的 grid-template-areas 块。重写引号内的行；区域保持矩形。

堆叠命名外壳

css

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

@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}

卡片网格的 auto-fit 与 minmax

画廊和仪表盘里，repeat(auto-fit, minmax(...)) 让列随空间出现并换行 — 往往比固定列数更少手动断点。

流体卡片列

css

.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

窄视口不是另一种布局语言 — 仍是 grid 工具，只是轨道或地图不同。用 CSS 移位，别复制「移动版 HTML」。

稳妥的响应式 grid 习惯

先设一个主断点。标签有帮助时，列变更与地图重写一起用。卡片数量要弹性处用 auto-fit。DOM 顺序利于键盘。完整响应式理论在后续模块。

带堆叠断点的命名外壳

css

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

@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}

固定网格上的 minmax 下限

css

.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}

@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}

自己动手

在 max-width: 40rem 下把两列外壳改成一列。
为窄屏堆叠重写 header / aside / main / footer 地图。
用 repeat(auto-fit, minmax(14rem, 1fr)) 做卡片行。
加一个稳妥断点 — 别一次重置整个 grid。
保持一棵 HTML 树；课程下一节是 Responsive Design。

常见错误

只无限缩小轨道而不改列或堆叠
另写「移动 HTML」而不在 CSS 里更新 grid
重写 grid-template-areas 行时单元格数不一致
一条巨大 media query 重置一切
把本课当成整个 Responsive 课程

小结

响应式 grid 随宽度调整列、地图与 auto-fit 网格
Media query 限定轨道与地图变更的视口
命名 areas 与小屏地图重写很配
稳妥断点与单一 DOM
Grid 模块（490–530）完成；接下来是 Responsive Design

🧠 测试您的知识

准备开始

测试您的知识

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

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

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

语言