拓展应用 · 响应式布局
媒体查询：按视口宽度切换列数
同一组活动卡片，在较宽视口中排三列，在较窄视口中排一列；内容和顺序不变。
.programs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
@media (max-width: 420px) {
.programs {
grid-template-columns: 1fr;
}
}视口、移动端配置与切换宽度
视口是当前网页可用于排版的可视区域。本例在预览窗口里加载独立文档，所以可以不缩放外层课件，只改变预览文档的视口。
移动端页面通常在 <head> 中设置：
<meta name="viewport"
content="width=device-width, initial-scale=1">width=device-width 让布局视口采用设备对应的 CSS 像素宽度。420px 是本例选取的切换宽度，不是所有手机的统一边界；应根据内容何时变得拥挤来确定。
完整代码与运行演示
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
.programs {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
@media (max-width: 420px) {
.programs {
grid-template-columns: 1fr;
}
}
.programs > article {
padding: 12px;
border: 1px solid teal;
}
</style>
</head>
<body>
<div class="programs">
<article>唱腔赏析</article>
<article>服饰观察</article>
<article>舞台交流</article>
</div>
</body>
</html>