副队长CSS教程(29)–CSS Grid 实战：实现通用图文混排布局

文章目录

[1. 图文混排布局需求分析](#1. 图文混排布局需求分析)
[2. 核心实现原理](#2. 核心实现原理)
[3. 经典左图右文布局（通用模板）](#3. 经典左图右文布局（通用模板）)
[4. 左文右图反向布局（一键改造）](#4. 左文右图反向布局（一键改造）)
[5. 移动端适配优化](#5. 移动端适配优化)
[6. Grid 图文混排核心优势（对比 Flex）](#6. Grid 图文混排核心优势（对比 Flex）)
- [6.1 Flex 图文痛点](#6.1 Flex 图文痛点)
- [6.2 Grid 完美解决](#6.2 Grid 完美解决)
[7. 总结](#7. 总结)

图文混排是网页开发中 最高频的布局场景 ，无论是文章详情、产品介绍、官网展示、资讯列表，都离不开「左边图右边文字」或「左边文字右边图」的排版。

传统实现图文混排大多使用浮动、Flex 布局，浮动会出现塌陷问题，Flex 实现图文排版虽然可行，但无法轻松实现图片、文字高度自动对齐、整体规整统一的效果。

而 CSS Grid 二维布局 可以一行代码划分结构，自动适配高度、自动居中、排版更工整，代码极简且零兼容问题，是目前图文混排的最优解。

本篇博客手把手教大家用 Grid 实现通用自适应图文混排布局，代码开箱即用，适配 PC 端，可直接用于项目开发。

1. 图文混排布局需求分析

我们日常开发的标准图文混排需求：

整体分为两栏：图片区域 + 文字区域
两栏间距均匀、排版整洁
图片高度和文字区域自动适配，不会留白、不会错位
结构简单，无需嵌套多余标签
可灵活调换「左图右文 / 左文右图」顺序

Grid 天然适配这种二维规整分栏场景，无需复杂计算，轻松实现完美排版。

2. 核心实现原理

利用 Grid 两大核心特性实现图文混排：

grid-template-columns 划分两栏结构：固定图片宽度 + 文字自适应剩余宽度
Grid 默认等高特性：两栏内容自动等高对齐，彻底解决图文高度错位问题
gap 属性统一间距：告别 margin 边距塌陷、边距重叠问题

3. 经典左图右文布局（通用模板）

最常用的图文布局：左侧固定图片宽度，右侧文字自适应填充剩余区域，整体等高居中。

完整可运行代码（单文件、缩进规范、直接复用）：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 左图右文布局</title>
    <style>
        /* 图文混排容器 */
        .img-text-box {
            /* 开启网格布局 */
            display: grid;
            /* 左栏图片固定280px，右栏文字自适应剩余宽度 */
            grid-template-columns: 280px 1fr;
            /* 两栏间距24px */
            gap: 24px;
            /* 整体居中、限制最大宽度 */
            width: 90%;
            max-width: 900px;
            margin: 50px auto;
            /* 垂直居中对齐，图文内容居中展示 */
            align-items: center;
        }

        /* 图片区域样式 */
        .img-box img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            /* 图片自适应不变形 */
            object-fit: cover;
        }

        /* 文字区域样式 */
        .text-box h3 {
            font-size: 20px;
            color: #222;
            margin-bottom: 12px;
        }

        .text-box p {
            font-size: 15px;
            color: #666;
            line-height: 1.8;
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <div class="img-text-box">
        <!-- 左侧图片区域 -->
        <div class="img-box">
            <img src="https://picsum.photos/600/400" alt="图文配图">
        </div>
        <!-- 右侧文字区域 -->
        <div class="text-box">
            <h3>Grid 图文混排布局标题</h3>
            <p>CSS Grid 是目前最适合图文混排的布局方案，相比 Flex 布局，Grid 天然支持二维等高对齐，排版更加规整。</p>
            <p>无需浮动、无需手动计算高度、无需处理边距塌陷，仅需几行代码即可实现企业级标准图文排版。</p>
            <p>适配绝大多数官网、资讯、产品介绍、博客文章等场景。</p>
        </div>
    </div>
</body>
</html>

效果：

https://picsum.photos/600/400 是Lorem Picsum提供的，前端常用的免费占位图片服务，专门写 Demo、测试页面布局用，不需要自己准备图片文件。

注意以下几点：

图片固定宽度，文字自动自适应，窗口缩放自动适配
align-items: center 实现图文垂直居中，告别高低错位
原生 gap 间距，样式整洁无 BUG
图片 height:auto，保证比例不变形

4. 左文右图反向布局（一键改造）

只需调换 grid-template-columns 顺序 + 调换 HTML 结构，即可快速实现左文右图布局，无需修改其他样式。

完整可运行代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 左文右图布局</title>
    <style>
        .img-text-box {
            display: grid;
            /* 调换顺序：文字自适应 + 图片固定宽度 */
            grid-template-columns: 1fr 280px;
            gap: 24px;
            width: 90%;
            max-width: 900px;
            margin: 50px auto;
            align-items: center;
        }

        .img-box img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
        }

        .text-box h3 {
            font-size: 20px;
            color: #222;
            margin-bottom: 12px;
        }

        .text-box p {
            font-size: 15px;
            color: #666;
            line-height: 1.8;
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <div class="img-text-box">
        <!-- 左侧文字区域 -->
        <div class="text-box">
            <h3>左文右图反向排版</h3>
            <p>通过调换 Grid 列的顺序，即可一键实现反向图文布局，代码无需大幅改动。</p>
            <p>Grid 布局的结构化特性，让排版修改更加简单高效，极大提升开发效率。</p>
        </div>
        <!-- 右侧图片区域 -->
        <div class="img-box">
            <img src="https://picsum.photos/600/400" alt="图文配图">
        </div>
    </div>
</body>
</html>

效果：

5. 移动端适配优化

电脑端左右分栏，手机端自动变成上图下文 / 上文下图，只需增加媒体查询，一键适配移动端。

适配核心代码（叠加在上方样式中即可）：

css 复制代码

/* 移动端适配：小屏改为单列流式布局 */
@media screen and (max-width: 768px) {
    .img-text-box {
        /* 改为单列布局，自动上下排列 */
        grid-template-columns: 1fr;
        /* 调整上下间距 */
        gap: 16px;
    }
}

媒体查询，这个知识点还没讲到，提前了解一下即可。

小屏幕效果：

6. Grid 图文混排核心优势（对比 Flex）

6.1 Flex 图文痛点

需要手动处理垂直对齐，容易出现图文高低错位
高度自适应时，两栏无法自动等高
依赖边距布局，容易出现塌陷、重叠问题

6.2 Grid 完美解决

二维布局天然等高对齐，零错位
结构分层清晰，HTML、CSS 语义化更强
原生 gap 间距，无布局 BUG
一键切换左右排版、适配移动端，扩展性极强

7. 总结

Grid 图文混排核心：固定宽度 + fr 自适应 划分两栏，搭配 align-items 实现垂直居中；
支持一键切换左图右文、左文右图两种主流排版，适配绝大多数业务场景；
搭配媒体查询，轻松实现电脑端分栏、手机端单列的响应式效果；
相比传统布局，Grid 图文混排代码更少、布局更稳、零兼容隐患，是目前项目最优方案。