响应式布局需结合CSS Grid与媒体查询。1. 通过不同断点调整grid-template-columns实现多设备适配，如移动端单列、平板两列、桌面三列；2. 利用grid-column与grid-row在不同屏幕下重排元素位置，如侧边栏在小屏移至主内容下方；3. 使用repeat(auto-fit, minmax())创建弹性网格，使列宽自适应容器尺寸；4. 混合使用弹性函数与媒体查询，在基础自适应之上对极小屏优化间距与元素跨度；5. 遵循“流动优先”原则，从移动端出发逐步增强大屏体验，提升布局灵活性与可维护性。
在现代网页设计中，响应式布局是必不可少的。CSS Grid 提供了强大的二维布局能力，而结合媒体查询（Media Queries），可以轻松实现不同屏幕尺寸下的自适应布局。下面介绍如何将媒体查询与 CSS Grid 有效结合，构建灵活、可维护的响应式页面。
使用媒体查询调整Grid容器结构
通过在不同断点下修改 grid-template-columns 和 grid-template-rows，可以让布局随屏幕尺寸变化。
例如，移动端使用单列布局，平板切换为两列，桌面端显示三列：
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
这样，随着视口变宽，网格自动从一列扩展到三列，内容排列更合理。
立即学习“前端免费学习笔记（深入）”；
针对特定设备优化Grid项目位置
利用 grid-column 和 grid-row，可以在不同设备上重新安排元素顺序或跨越区域。
比如，在桌面端将侧边栏放在右侧，在移动端移到主内容下方：
.sidebar {
grid-column: 2;
grid-row: 1;
}
.main-content {
grid-column: 1;
grid-row: 1;
}
@media (max-width: 767px) {
.sidebar {
grid-column: 1;
grid-row: 2;
}
.main-content {
grid-row: 1;
}
}
这种方式无需改动HTML结构，仅靠CSS即可实现视觉顺序的调整。
使用minmax()和auto-fit提升灵活性
结合 repeat()、minmax() 和 auto-fit 可创建更智能的响应式网格，减少对媒体查询的依赖。
示例：让每项至少200px宽，自动填充可用空间：
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
浏览器会根据容器宽度自动计算列数。小屏时自动变为单列，大屏则多列并排，效果自然流畅。
混合策略：弹性断点 + 网格自适应
最佳实践是将固定断点的媒体查询与弹性Grid函数结合使用。基础结构用 minmax 控制，关键节点再用媒体查询精细调整。
例如：
.grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
@media (max-width: 480px) {
.grid-container {
gap: 0.5rem;
}
.featured-item {
grid-column: span 1;
}
}
既保证了基本的自适应能力，又在极小屏幕上优化了间距和重点元素展示。
基本上就这些。掌握媒体查询与Grid的配合逻辑，就能高效构建真正响应式的复杂布局。关键是理解“流动优先”原则，从移动设备出发，逐步增强大屏体验。不复杂但容易忽略细节。
