响应式网页设计的核心是保证页面在各类设备上都能良好呈现。CSS Grid擅长处理行与列的二维排布，媒体查询能监听视口变化并应用不同样式规则，两者配合可以大幅降低自适应布局的开发成本。
一、CSS Grid基础结构
使用display:grid可以将容器变为网格容器，并通过grid-template-columns定义列宽。以下示例创建一个三列等宽布局：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
二、媒体查询控制断点
当屏幕宽度小于768像素时，我们希望改为单列显示。这时用媒体查询覆盖原网格定义：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
常用断点参考
| 设备类型 | 最大宽度 | 建议列数 |
|---|---|---|
| 手机 | 480px | 1 |
| 平板 | 768px | 2 |
| 桌面 | 1024px以上 | 3或4 |
三、完整页面示例
下面给出一个简单HTML页面，演示Grid与媒体查询协同工作：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.box {
background: #eef;
padding: 20px;
text-align: center;
}
/* 平板以下两列 */
@media (max-width: 768px) {
.wrap { grid-template-columns: repeat(2, 1fr); }
}
/* 手机单列 */
@media (max-width: 480px) {
.wrap { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">区块一</div>
<div class="box">区块二</div>
<div class="box">区块三</div>
<div class="box">区块四</div>
</div>
</body>
</html>
四、注意事项
- 移动端优先时，可先写单列样式再用min-width媒体查询逐步增强。
- 避免写死宽度，多用fr单位和百分比。
- 用<meta>视口标签保证移动端缩放正确。
把CSS Grid作为布局骨架，媒体查询作为调节手段，就能用少量代码完成大多数响应式页面需求。