本文详解如何用 css grid 正确实现三张图片水平并排布局，解决因选择器范围过广、嵌套结构混乱导致的对齐失效问题，并提供可直接运行的语义化代码示例。
要让三张图片真正“并排显示”在一行中，核心在于精准控制网格容器的作用范围——这是初学者最容易踩坑的地方。原代码中对所有 <div> 全局设置 display: grid，导致内部嵌套的 div（如 .names、.mutual-friends）也被强制变为网格容器，破坏了预期布局流。正确的做法是：为每组需要网格布局的元素显式添加专用类名（如 .wrapper），避免样式污染。
✅ 正确实现步骤
- 创建专属网格容器：用 <div class="wrapper"> 包裹三张主图，仅对该容器启用 Grid；
- 定义等宽列与间距：grid-template-columns: 100px 100px 100px 指定三列固定宽，column-gap: 124px 控制列间间隙；
- 统一图片样式委托给父容器类：例如 .cat img { width: 200px; height: 200px; object-fit: cover; }，避免重复写 .cat、.cat2 等冗余类；
- 为头像+姓名区域单独建网格：.mutual-friends .names 同样使用 display: grid + 相同列定义，确保文字与下方头像垂直对齐；
- 重置默认边距：p { margin: 0; } 防止段落默认上下边距撑开布局。
? 完整可运行代码（已优化结构与语义）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>CSS Grid 三图并排示例</title>
<style>
* { box-sizing: border-box; }
p {
font-family: Arial, sans-serif;
font-weight: bold;
color: rgb(71, 71, 71);
font-size: 16px;
margin: 0; /* 关键：清除默认段落边距 */
}
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
column-gap: 124px;
margin: 20px 0;
}
.cat img,
.prof-picture img {
width: 200px;
height: 200px;
object-fit: cover;
display: block; /* 避免图片底部空白 */
}
.prof-picture img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-top: 15px;
}
.mutual-friends .names {
display: grid;
grid-template-columns: 100px 100px 100px;
column-gap: 124px;
margin-bottom: 10px;
}
.mutual-friends {
display: grid;
grid-template-columns: 100px 100px 100px;
column-gap: 124px;
}
</style>
</head>
<body>
<!-- 主图区域 -->
<div class="wrapper">
<div class="cat">
<img src="https://plus.unsplash.com/premium_photo-1661508614319-b5e40d1143bb?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60" alt="Cat 1">
</div>
<div class="cat">
<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60" alt="Cat 2">
</div>
<div class="cat">
<img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=60" alt="Cat 3">
</div>
</div>
<!-- 姓名与头像区域 -->
<div class="mutual-friends">
<div class="names">
<p>Oliver</p>
<p>Mimi</p>
<p>Snow</p>
</div>
<div class="prof-picture">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=60" alt="Profile 1">
</div>
<div class="prof-picture">
<img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=60" alt="Profile 2">
</div>
<div class="prof-picture">
<img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=60" alt="Profile 3">
</div>
</div>
</body>
</html>⚠️ 注意事项与进阶提示
- 不要滥用通配符选择器：避免 div { display: grid; } 这类全局声明，务必限定作用域（如 .wrapper）；
- 图片宽高需与网格列宽协调：当前 grid-template-columns: 100px ×3，但图片设为 200px，实际会溢出。若需图片填满列，应设 width: 100%; height: auto; 并移除固定像素值；
- 响应式建议：可配合 @media 查询，在小屏下改为 grid-template-columns: 1fr; 实现堆叠；
- 语义化增强：用 <figure> + <figcaption> 替代纯 <div> 更利于可访问性。
掌握「容器专属化」和「样式责任分离」两大原则，CSS Grid 布局将变得清晰可控。多加练习，你很快就能自信驾驭复杂网格场景。
