答案：CSS Grid 与媒体查询结合可实现响应式布局，通过断点调整网格结构和元素排列，适配多设备显示需求。
在响应式网页设计中，CSS Grid 布局与 @media 查询 结合使用，能有效实现子元素在不同屏幕尺寸下的自适应布局。通过针对不同设备断点调整网格结构、行列分布和子元素排列方式，可以确保页面在手机、平板和桌面端都有良好的视觉效果和用户体验。
使用 Media 查询控制 Grid 布局结构
Grid 布局的灵活性在于可以通过 media 查询动态修改 grid-template-columns、grid-template-rows 和 grid-gap 等属性，适配不同屏幕宽度。
例如，在桌面端使用三列布局，在平板切换为两列，手机上变为单列：
.container {
display: grid;
gap: 1rem;
}
/ 默认手机布局：单列 /
.container {
grid-template-columns: 1fr;
}
/ 平板：768px 以上变为两列 /
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
/ 桌面：1024px 以上变为三列 /
@media (min-width: 1024px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
调整 Grid 子元素的位置与跨度
借助 grid-column 和 grid-row，可以在不同屏幕下重新安排子元素的位置，比如将标题在移动端居首、侧边栏在小屏隐藏或后置。
常见应用场景：
- 移动端将导航置于内容下方
- 大屏显示侧边栏，小屏将其隐藏或移至底部
- 突出主内容区，广告或辅助模块在小屏堆叠显示
.header { grid-column: 1 / -1; }
.sidebar { grid-column: 1; grid-row: 3; }
@media (min-width: 1024px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: auto auto;
}
.header { grid-column: 1 / -1; }
.sidebar {
grid-column: 1;
grid-row: 2;
}
.main-content {
grid-column: 2;
grid-row: 2;
}
}
响应式单位提升适配灵活性
结合 fr、minmax()、auto-fit 和 auto-fill 等 Grid 特性，配合 media 查询可进一步简化响应式逻辑。
例如，使用 repeat(auto-fit, minmax(250px, 1fr)) 实现自动换行的弹性网格：
.container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
这种写法无需额外 media 查询即可实现基本响应效果，但仍可在特定断点微调，如限制最大列数或调整间距。
基本上就这些。通过合理组合 Grid 和 media 查询，既能保持代码简洁，又能精准控制不同设备上的布局表现。关键在于明确断点选择和内容优先级，让子元素在各种屏幕上都能自然呈现。
