如何在CSS中制作响应式图文混排 grid-template-areas结合media queries

在网页开发过程中，响应式图文混排是非常常见的布局需求，不同屏幕尺寸下图文的位置、排列方式往往需要做出调整。传统的浮动布局或者弹性布局在实现复杂布局切换时，往往需要编写大量的适配代码，维护成本较高。而CSS的grid-template-areas属性配合media queries，可以非常直观地定义布局区域，在不同断点下轻松切换图文排列规则，大幅降低布局适配的复杂度。

grid-template-areas基础概念

grid-template-areas是CSS Grid布局的核心属性之一，它允许我们通过字符串的形式直接定义网格区域的名称和排列规则，每个字符串代表一行，字符串中的名称对应网格单元格，相同名称的单元格会自动合并为一个区域。使用这个属性之前，需要先通过display: grid将容器定义为网格容器，再通过grid-template-columns和grid-template-rows定义网格的列和行的大小。

比如我们定义一个两行两列的网格，第一行的两个单元格都属于图文区域，第二行左边是文字区域，右边是图片区域，对应的grid-template-areas写法如下：

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header header"
        "text image";
}

之后只需要在对应的子元素上通过grid-area属性指定所属的区域名称即可，比如文字元素设置grid-area: text，图片元素设置grid-area: image，就可以自动放入对应的网格区域中。

结合media queries实现响应式切换

media queries可以根据设备的屏幕尺寸、分辨率等条件应用不同的CSS样式，我们将它和grid-template-areas结合，就可以在不同屏幕尺寸下定义不同的区域排列规则，实现图文混排的响应式切换。

桌面端布局定义

在桌面端，我们通常希望图文左右排列，文字在左，图片在右，占据相等的宽度，对应的CSS代码如下：

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Microsoft YaHei", sans-serif;
    line-height: 1.6;
    padding: 20px;
}
/* 图文混排容器 */
.article-wrap {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    /* 桌面端布局：文字左，图片右 */
    grid-template-areas: "article-text article-img";
    max-width: 1200px;
    margin: 0 auto;
}
/* 文字区域样式 */
.article-text {
    grid-area: article-text;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 8px;
}
/* 图片区域样式 */
.article-img {
    grid-area: article-img;
    border-radius: 8px;
    overflow: hidden;
}
.article-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

对应的HTML结构如下，子元素通过grid-area属性匹配容器定义的区域名称：

<div class="article-wrap">
    <div class="article-text">
        <h3>响应式布局的优势</h3>
        <p>响应式布局可以让网页在不同尺寸的设备上都能保持良好的展示效果，提升用户的访问体验。通过CSS Grid的相关属性，我们可以更高效地实现复杂的布局需求，减少不必要的代码冗余。</p>
        <p>grid-template-areas配合media queries的方案，让布局规则更加直观，后续维护和修改断点布局时也更加便捷，是响应式图文混排的优质实现方案。</p>
    </div>
    <div class="article-img">
        <img src="https://ipipp.com/demo-img.jpg" alt="布局示例图" />
    </div>
</div>

移动端布局适配

在移动端，屏幕宽度较小，左右排列会导致文字和图片都过于狭窄，阅读体验差，因此我们通常会改为图文上下排列，图片在上方，文字在下方。只需要在media queries中重新定义grid-template-areas和网格列行规则即可：

/* 屏幕宽度小于768px时应用移动端布局 */
@media screen and (max-width: 768px) {
    .article-wrap {
        /* 改为单列布局 */
        grid-template-columns: 1fr;
        /* 两行：第一行放图片，第二行放文字 */
        grid-template-areas: 
            "article-img"
            "article-text";
    }
}

这样当屏幕宽度小于等于768px时，网格会自动切换为单列，图片区域在第一行，文字区域在第二行，实现图文上下排列的效果，无需修改HTML结构，只需要调整CSS的布局规则即可完成适配。

注意事项与扩展用法

• grid-template-areas中每一行的字符串长度必须一致，也就是每一行的区域名称数量要和定义的列数匹配，否则布局会失效。
• 如果某个单元格不需要放置内容，可以用点号.表示，比如grid-template-areas: "header ." "text image"，表示第一行第二个单元格为空。
• 可以在多个断点中定义不同的grid-template-areas，实现更多尺寸的布局适配，比如平板端可以定义三列布局，将图文和其他辅助内容排列在三个区域中。
• grid-template-areas配合grid-template-columns的fr单位，可以轻松实现区域的比例调整，比如桌面端可以设置文字区域占2fr，图片区域占1fr，让文字区域更宽。

通过grid-template-areas和media queries的结合，我们可以非常灵活地实现各种响应式图文混排效果，布局规则直观易懂，适配逻辑清晰，相比传统布局方案优势明显，非常适合在各类网页开发场景中使用。

CSSgrid-template-areasmedia_queries响应式图文混排修改时间：2026-06-16 00:33:32