如何用css grid与media query结合实现响应式布局

在移动端优先的开发理念下，响应式布局需要兼顾手机、平板、桌面等不同设备的屏幕尺寸，css grid提供了高效的二维布局能力，media query可以检测屏幕尺寸触发样式变更，两者结合能快速实现适配多端的布局效果。

核心原理介绍

css grid通过定义网格容器和网格项，可以轻松控制元素的行列分布、间距、对齐方式，适合处理复杂的页面布局结构。media query则可以根据设备的宽度、高度、方向等特征应用不同的css规则，两者结合的核心思路是先定义基础网格布局，再通过media query在不同断点处修改网格的相关属性，实现布局的动态调整。

css grid基础属性

使用css grid需要先给容器元素设置display: grid，常用的核心属性包括：

• grid-template-columns：定义网格的列宽和列数
• grid-template-rows：定义网格的行高和行数
• gap：定义网格项之间的间距
• grid-column：定义网格项占据的列范围
• grid-row：定义网格项占据的行范围

media query基础用法

media query的常用语法结构如下，当满足括号内的条件时，内部的css规则会生效：

@media (max-width: 768px) {
    /* 屏幕宽度小于等于768px时应用的样式 */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* 屏幕宽度在769px到1024px之间时应用的样式 */
}
@media (min-width: 1025px) {
    /* 屏幕宽度大于等于1025px时应用的样式 */
}

结合实现响应式布局的步骤

第一步：定义基础网格结构

先按照移动端优先的原则定义基础的网格布局，移动端通常屏幕宽度较窄，适合采用单列布局，所有内容从上到下依次排列。

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    display: grid;
    /* 移动端默认单列布局 */
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
}
/* 定义网格项的基础样式 */
.header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}
.sidebar {
    background-color: #e8e8e8;
    padding: 20px;
}
.main-content {
    background-color: #f8f8f8;
    padding: 20px;
    min-height: 300px;
}
.footer {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

对应的html结构如下：

<div class="container">
    <div class="header">头部区域</div>
    <div class="sidebar">侧边栏区域</div>
    <div class="main-content">主要内容区域</div>
    <div class="footer">底部区域</div>
</div>

第二步：添加media query断点调整布局

针对平板和桌面端设备，通过media query修改grid-template-columns等属性，调整网格的列分布，实现多列布局。

/* 平板端适配 屏幕宽度大于等于769px */
@media (min-width: 769px) {
    .container {
        /* 两列布局 侧边栏占1份 主内容占3份 */
        grid-template-columns: 1fr 3fr;
        /* 定义行分布 头部和底部各占自动高度 中间内容占剩余高度 */
        grid-template-rows: auto 1fr auto;
    }
    .header {
        /* 头部占据两列 */
        grid-column: 1 / 3;
    }
    .footer {
        /* 底部占据两列 */
        grid-column: 1 / 3;
    }
}

/* 桌面端适配 屏幕宽度大于等于1025px */
@media (min-width: 1025px) {
    .container {
        /* 三列布局 侧边栏 主内容 额外栏 */
        grid-template-columns: 1fr 4fr 1fr;
        max-width: 1200px;
        margin: 0 auto;
    }
    .header {
        /* 头部占据三列 */
        grid-column: 1 / 4;
    }
    .footer {
        /* 底部占据三列 */
        grid-column: 1 / 4;
    }
}

完整效果验证

将上述css和html代码组合后，在不同宽度的设备中可以看到不同的布局效果：

• 屏幕宽度小于769px时：四个区域从上到下依次排列，均为单列宽度
• 屏幕宽度在769px到1024px之间时：头部和底部通栏，侧边栏和主内容左右两列排列
• 屏幕宽度大于1024px时：头部和底部通栏，侧边栏、主内容、额外栏三列排列，整体内容居中且最大宽度不超过1200px

这种实现方式不需要修改html结构，仅通过css规则调整就能完成多端适配，维护成本较低，适合大多数常规页面的响应式布局需求。

注意事项

• 断点数值可以根据实际项目的设计稿调整，不需要完全遵循通用的768px、1024px等数值
• 如果网格项的内容高度不一致，可以配合align-items等属性调整对齐方式
• 复杂布局中可以组合使用grid-template-areas属性，通过区域命名的方式更直观地管理网格分布

css_gridmedia_query响应式布局前端布局修改时间：2026-06-16 21:33:37