使用CSS Grid可高效实现图文混排。首先构建包含图片和文本的容器，通过display: grid和grid-template-columns设置两栏布局，结合gap与align-items优化间距和对齐；利用:nth-child配合grid-column实现奇偶行图片左右交替；在移动端通过媒体查询改为单列堆叠，并用order调整显示顺序，提升响应式体验。Grid的二维控制能力使布局更灵活精准。
要实现图文混排的布局，CSS Grid 是一个非常强大且灵活的工具。通过
Grid 布局
，你可以轻松控制图片和文字在页面中的位置、对齐方式以及响应式表现。下面介绍如何结合 HTML 与 CSS Grid 实现常见的图文混排效果。
1. 基础结构：HTML 搭建
首先定义一个容器，包含图片和文本内容。可以使用语义化标签如
或
：
2. 使用 Grid 设置两栏布局
通过
将容器设为网格布局，并划分列轨道：
这样就能实现图片在左、文字在右的基础图文混排。你也可以通过调整
控制比例。
立即学习
“
前端免费学习笔记（深入）
”；
3. 图文交替
排列
（多组内容）
如果你有多个图文块，希望奇数行图片在左、偶数行图片在右，可以用
配合
实现反转：
Midjourney AI 提示词工具
PHP中文网提供Midjourney AI 提示词在线生成工具，专为解决 AI 绘画“词穷”痛点而生，用户只需输入“一只猫”等简单想法，工具便能利用 AI 智能扩展出包含艺术风格、光影构图、镜头参数及负面提示词的专业级英文 Prompt。它完美兼容 Midjourney V8.1 及 Niji 模型，支持一键复制与参数自动优化，大幅降低创作门槛，是提升出图质量与效率的必备辅助神器。
下载
更推荐使用 Grid 的列定位来控制顺序：
4. 响应式适配
在小屏幕上，可以将布局改为垂直堆叠：
利用
属性可灵活调整元素显示顺序，提升移动端阅读体验。
基本上就这些。Grid 提供了比传统浮动或 Flex 更精细的二维控制能力，特别适合复杂图文混排场景。合理使用
、
、
和媒体查询，能快速构建美观且响应式的布局。不复杂但容易忽略细节。
articlediv
标题内容
这里是描述性文字内容，用于配合图片进行说明……
display: grid
.grid-layout {
display: grid;
grid-template-columns: 1fr 2fr; /* 图片占1份，文字占2份 */
gap: 20px;
align-items: center; /* 垂直居中对齐 */
}
.grid-image {
width: 100%;
height: auto;
border-radius: 8px;
}
grid-template-columns:nth-childgrid-column
.grid-layout:nth-child(even) {
flex-direction: row-reverse; /* 在 Flex 中可用，但在 Grid 中需用 grid-column 调整 */
}
.alternate-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
align-items: center;
}
.alternate-layout:nth-child(odd) .grid-image {
grid-column: 1;
}
.alternate-layout:nth-child(odd) .grid-text {
grid-column: 2;
}
.alternate-layout:nth-child(even) .grid-image {
grid-column: 2;
}
.alternate-layout:nth-child(even) .grid-text {
grid-column: 1;
}
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
text-align: center;
}
.grid-image {
order: -1; / 让图片显示在文字上方 /
}
}
ordergrid-template-columnsgapalign-items