传统图文布局常依赖浮动、定位或弹性盒模型，但它们在处理行列同时变化的复杂场景时往往显得力不从心。CSS Grid布局提供了真正的二维网格系统，可以在同一个容器中同时定义行与列，让图文区域的划分、对齐和响应式调整变得更加直观。本文会从Grid的基础语法入手，逐步完成一个响应式图文布局的搭建，并分析开发中最容易踩到的几个问题。
一、CSS Grid的核心概念：先建立网格容器
要使用Grid布局，第一步是把某个元素设置为网格容器。只需在父元素上声明display: grid，它的直接子元素就会自动变成网格项。与Flexbox不同，Grid允许同时控制水平方向的列和垂直方向的行。最常用的三个属性是grid-template-columns、grid-template-rows和gap。例如，想要创建一个三列布局，可以写成grid-template-columns: 1fr 1fr 1fr，这里的fr表示等分剩余空间。
在图文布局中，列宽通常不会写死，而是使用minmax()函数来定义最小值和最大值。比如minmax(240px, 1fr)表示每一列的最小宽度为240像素，空间充足时再按1份比例扩展。这样写出来的网格既不会在小屏幕上被压缩得过窄，也不会在大屏幕上浪费横向空间。行高方面，如果图片高度不固定，可以使用grid-auto-rows控制隐式行的高度，避免内容被裁切。
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
上面的代码使用了repeat()函数和auto-fit关键字。repeat()用来重复生成列轨道，auto-fit则会根据容器宽度自动计算能容纳多少列。当容器宽度发生变化时，列数会自动增减，无需额外写媒体查询。这种写法非常适合卡片式图文列表，也是响应式布局中最常见的Grid用法之一。
二、搭建基础图文卡片：从HTML到Grid布局
一个典型的图文卡片通常包含图片、标题和描述文字。为了让卡片在网格中保持一致的视觉高度，可以将每个卡片内部也设置为弹性布局，让图片区域固定高度，文字区域自由伸展。HTML结构如下：
<div class="gallery">
<article class="card">
<img src="https://picsum.photos/400/300?random=1" alt="示例图">
<div class="card-body">
<h3>卡片标题一</h3>
<p>这里是描述文字，用来介绍这张卡片的主要内容。</p>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/400/300?random=2" alt="示例图">
<div class="card-body">
<h3>卡片标题二</h3>
<p>第二张卡片的描述文字可能会更长一些，测试布局是否稳定。</p>
</div>
</article>
<article class="card">
<img src="https://picsum.photos/400/300?random=3" alt="示例图">
<div class="card-body">
<h3>卡片标题三</h3>
<p>第三张卡片用来补充展示，帮助检查列间距和行间距。</p>
</div>
</article>
</div>
在CSS部分，除了给.gallery设置网格列之外，还需要处理图片的尺寸行为。图片本身是替换元素，如果直接放入网格轨道，可能会因为宽度超出容器而导致溢出。此时应给图片设置width: 100%和height: 180px，再配合object-fit: cover，让图片在固定高度的容器中保持比例并裁剪多余部分。
.card {
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-body {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-body p {
margin: 8px 0 0;
line-height: 1.6;
color: #555;
}
这种结构下，每张卡片的图片高度固定，文字区域由flex: 1自动撑开，所以即使某张卡片的描述文字比其他卡片长，也不会影响整行卡片的高度。Grid默认的align-items值为stretch，这会让同一行中的所有网格项拉伸到相同高度，配合内部弹性布局后，卡片底部的边界就能保持整齐。
三、响应式断点与自动适配策略
对于更复杂的图文交错布局，例如左侧图片右侧文字、左右交替排列，可以使用媒体查询在不同屏幕宽度下切换列数。移动端通常采用单列堆叠，平板和桌面端则切换为双列。下面是一个典型实现：
.feature {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 32px;
}
@media (min-width: 768px) {
.feature {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.feature:nth-child(even) .feature-img {
order: 2;
}
}
@media (min-width: 1024px) {
.feature {
grid-template-columns: 1.2fr 0.8fr;
gap: 32px;
}
}
移动端默认使用1fr单列，图片和文字自然上下排列。当屏幕宽度达到768像素时，网格切换为两列，左右各占一半。为了做出交错效果，可以通过nth-child(even)选中偶数项，把图片区域的order改为2，让图片显示在右侧。桌面端则进一步调整为1.2fr 0.8fr，使图片列略宽，视觉重心更突出。
在响应式设计中，auto-fit和auto-fill是两个容易混淆的关键字。当网格容器有额外空间时，auto-fit会折叠空轨道，让现有项目拉伸填满容器；auto-fill则会保留空轨道，即使没有足够多的项目，也会按轨道宽度预留空白。对于图片画廊这种希望占满整行的场景，使用auto-fit通常更合适；如果需要保留固定槽位，比如分页占位符，则可以用auto-fill。
四、常见问题与最佳实践
第一个常见问题是图片溢出。在很多浏览器中，网格项的最小宽度默认是auto，如果图片或长文本的原始宽度超过轨道宽度，内容会把网格项撑开，破坏整体布局。解决方法是为网格项设置min-width: 0，或者给图片设置max-width: 100%。对于长文本，还需要加上overflow-wrap: break-word，避免连续的英文单词或URL导致水平溢出。
第二个问题是隐式行高度失控。当Grid自动创建行时，默认使用grid-auto-rows: auto，这会导致行高由内容决定。如果某些网格项文字很少，而另一些内容很多，行高会显得参差不齐。可以通过grid-auto-rows: minmax(200px, auto)设置最小行高，保证每一行至少有200像素的展示空间。对于卡片列表，也可以将grid-auto-rows设置为1fr，让所有行平均分配高度，使网格更规整。
第三个问题是图片高度不一致造成的视觉跳动。解决这类问题的关键在于统一图片容器的高度，而不是依赖图片本身的高度。通常的做法是给图片外层包一个固定高度的容器，再通过object-fit裁剪图片。例如：
.card-media {
height: 220px;
overflow: hidden;
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
这种方式把图片的展示区域和网格轨道解耦开来，即使原始图片尺寸不一致，也不会影响网格行的高度。配合loading="lazy"属性，还可以在图片较多时提升首屏加载性能。需要注意的是，object-fit只对设置了固定高度和宽度的替换元素生效，因此图片必须同时具有确定的宽度和高度。
最后，在调试Grid布局时，可以借助浏览器开发者工具中的网格高亮功能。打开检查面板后，如果当前元素是Grid容器，旁边会出现一个grid标记，点击它可以显示行线、列线、轨道编号和间距区域。这对于理解auto-fit生成的轨道数量、检查gap大小以及定位网格项的具体位置非常有帮助。建议在动手修改样式前先打开这个可视化工具，能减少大量猜测和试错时间。