css Grid 结合媒体查询可高效实现响应式布局。通过 display: grid 定义二维结构，使用 grid-template-columns 设置列宽，配合 @media 在不同屏幕尺寸下调整网格：移动端单列、平板双列、桌面多栏。利用 repeat(auto-fit, minmax(250px, 1fr)) 可自动适配列数，减少媒体查询依赖。需设置合理断点（如 600px、1024px），采用相对单位并测试真实设备，确保内容可读与布局弹性。该组合是现代响应式设计核心方法。

在现代网页布局中，CSS Grid 与媒体查询结合使用，可以高效实现响应式设计。通过定义灵活的网格结构，并在不同屏幕尺寸下调整布局，能让页面在手机、平板和桌面设备上都有良好的视觉效果。

使用 CSS Grid 定义基础网格布局

Grid 布局通过将页面划分为行和列，形成一个二维布局系统。先为容器设置 display: grid，再用 grid-template-columns 和 grid-template-rows 定义结构。

例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

这会创建两列等宽的网格。在小屏幕上，这种布局可能显得拥挤，因此需要配合媒体查询调整。

立即学习“前端免费学习笔记（深入）”；

通过媒体查询适配不同屏幕

媒体查询（@media）可以根据视口宽度改变 CSS 样式。结合 Grid，可以在不同断点重新定义网格结构。

常见做法是：移动端使用单列布局，平板用双列，桌面端用多列。

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1025px) {
  .container {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

这样，页面在手机上垂直堆叠，在平板上并排显示，在大屏上展示更复杂的三栏布局。

AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

75

查看详情

利用 repeat() 和 minmax() 提升灵活性

CSS 提供了 repeat() 和 minmax() 函数，让网格更具自适应性。

比如：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

这个写法表示：每列最小 250px，最大为 1fr，浏览器自动计算能放几列。屏幕变窄时，列数自动减少，无需额外媒体查询。

虽然这减少了对媒体查询的依赖，但在需要精确控制布局变化时，仍建议结合使用。

实际应用中的注意事项

确保内容在不同布局下依然可读，避免文字过小或元素重叠。

• 设置合理的断点，通常以常见设备宽度为准（如 768px、1024px）
• 使用相对单位（如 rem、em、%）提升整体弹性
• 测试真实设备上的表现，而不仅依赖开发者工具
• 考虑网格项的 grid-column 在不同断点下的位置调整

基本上就这些。Grid 与媒体查询的组合，既强大又直观，是构建现代响应式页面的核心手段之一。不复杂但容易忽略细节。

以上就是在