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