使用css grid可高效实现图文混排。首先构建包含图片和文本的容器，通过display: grid和grid-template-columns设置两栏布局，结合gap与align-items优化间距和对齐；利用:nth-child配合grid-column实现奇偶行图片左右交替；在移动端通过媒体查询改为单列堆叠，并用order调整显示顺序，提升响应式体验。grid的二维控制能力使布局更灵活精准。
要实现图文混排的布局，CSS Grid 是一个非常强大且灵活的工具。通过 Grid 布局，你可以轻松控制图片和文字在页面中的位置、对齐方式以及响应式表现。下面介绍如何结合 HTML 与 CSS Grid 实现常见的图文混排效果。
1. 基础结构：HTML 搭建
首先定义一个容器，包含图片和文本内容。可以使用语义化标签如 article 或 div：
<div class="grid-layout">
@@##@@
<div class="grid-text">
<h3>标题内容</h3>
<p>这里是描述性文字内容，用于配合图片进行说明……</p>
</div>
</div>
2. 使用 Grid 设置两栏布局
通过 display: grid 将容器设为网格布局，并划分列轨道：
.grid-layout {
display: grid;
grid-template-columns: 1fr 2fr; /* 图片占1份，文字占2份 */
gap: 20px;
align-items: center; /* 垂直居中对齐 */
}
<p>.grid-image {
width: 100%;
height: auto;
border-radius: 8px;
}</p>这样就能实现图片在左、文字在右的基础图文混排。你也可以通过调整 grid-template-columns 控制比例。
3. 图文交替排列（多组内容）
如果你有多个图文块，希望奇数行图片在左、偶数行图片在右，可以用 :nth-child 配合 grid-column 实现反转：
.grid-layout:nth-child(even) {
flex-direction: row-reverse; /* 在 Flex 中可用，但在 Grid 中需用 grid-column 调整 */
}
更推荐使用 Grid 的列定位来控制顺序：
.alternate-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
align-items: center;
}
<p>.alternate-layout:nth-child(odd) .grid-image {
grid-column: 1;
}</p><p>.alternate-layout:nth-child(odd) .grid-text {
grid-column: 2;
}</p><p>.alternate-layout:nth-child(even) .grid-image {
grid-column: 2;
}</p><p>.alternate-layout:nth-child(even) .grid-text {
grid-column: 1;
}</p>4. 响应式适配
在小屏幕上，可以将布局改为垂直堆叠：
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr;
text-align: center;
}
<p>.grid-image {
order: -1; /<em> 让图片显示在文字上方 </em>/
}
}</p>利用 order 属性可灵活调整元素显示顺序，提升移动端阅读体验。
基本上就这些。Grid 提供了比传统浮动或 Flex 更精细的二维控制能力，特别适合复杂图文混排场景。合理使用 grid-template-columns、gap、align-items 和媒体查询，能快速构建美观且响应式的布局。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
