CSS Grid结合媒体查询可实现响应式布局，先用Grid创建四列桌面布局，再通过@media调整平板和手机端为两列或单列，也可使用minmax与auto-fit实现自适应列数，减少媒体查询依赖，配合相对单位与Flexbox提升灵活性，确保多设备兼容与视觉一致性。
响应式网页设计中，CSS网格（Grid）和媒体查询（Media Queries）配合使用能有效适配不同屏幕尺寸。通过定义灵活的布局结构，在不同设备上提供良好的视觉体验。
使用CSS Grid创建基础网格布局
CSS Grid 提供了强大的二维布局能力。先设置一个容器为网格容器，再定义行与列的尺寸。
示例：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
这个布局在桌面端将内容分为四列等宽区域，适用于大屏展示。
通过媒体查询调整小屏幕布局
当屏幕变小时，可以利用媒体查询修改网格结构，使其更适应移动设备。
立即学习“前端免费学习笔记（深入）”；
常见断点与调整方式：
- max-width: 768px —— 平板尺寸，改为两列
- max-width: 480px —— 手机尺寸，改为单列堆叠
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 1fr;
}
}
结合 minmax() 与 auto-fit 实现自适应列数
更现代的方式是使用 minmax() 配合 auto-fit，让列数根据容器自动调整，减少对媒体查询的依赖。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
这种写法表示：每列最小 250px，最大占满剩余空间，浏览器自动决定放几列。在窄屏下会自动换行成单列，无需额外媒体查询。
实用建议与注意事项
虽然 auto-fit 能简化代码，但在复杂布局中仍需媒体查询精细控制。比如需要隐藏某些元素、调整顺序或改变间距时。
- 优先使用相对单位（如 fr、%）而非固定像素
- 测试多个设备宽度，确保过渡自然
- 避免为每个断点都写媒体查询，保持简洁
- 可组合 Flexbox 与 Grid，子项内部用 Flex 布局更灵活
基本上就这些。Grid 提供结构，媒体查询负责适配，两者结合能让页面在各种设备上都表现良好。不复杂但容易忽略细节，比如 gap 的兼容性和老浏览器支持问题。
