本文详解如何通过 css grid 正确实现三张图片水平并排布局，解决因全局 `div` 应用 `display: grid` 导致结构错乱的问题，并提供语义清晰、可复用的 html/css 实践方案。
要让三张图片真正“并排显示”在一行中，核心在于精准控制网格容器的作用范围——不能对所有 <div> 统一设置 display: grid（如原代码中 div { display: grid; ... }），否则嵌套的 div（如 .names、.mutual-friends）也会被强制变为网格容器，破坏预期布局层次。
✅ 正确做法是：为每组需网格布局的元素显式添加语义化类名，并仅对该类应用 Grid 样式。
以下是一个结构清晰、职责分明的实现方案：
1. HTML 结构优化（语义化 + 层级明确）
<body>
<!-- 主图区域：3 张大图并排 -->
<div class="image-grid">
<div class="cat"><img src="cat1.jpg" alt="Cat 1"></div>
<div class="cat"><img src="cat2.jpg" alt="Cat 2"></div>
<div class="cat"><img src="dog.jpg" alt="Dog"></div>
</div>
<!-- 名称与头像区域：姓名与对应头像上下对齐，整体并排 -->
<div class="profile-grid">
<div class="profile-item">
<p>Oliver</p>
<img class="prof-picture" src="oliver.jpg" alt="Oliver">
</div>
<div class="profile-item">
<p>Mimi</p>
<img class="prof-picture" src="mimi.jpg" alt="Mimi">
</div>
<div class="profile-item">
<p>Snow</p>
<img class="prof-picture" src="snow.jpg" alt="Snow">
</div>
</div>
</body>2. 对应 CSS（专注、解耦、可维护）
/* 主图网格：3 列等宽，带间距 */
.image-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 推荐使用 fr 单位，更灵活 */
gap: 24px; /* 替代 column-gap，同时支持行列间距 */
margin: 20px 0;
}
.image-grid img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* 头像信息网格：每项独立容器，内部垂直居中 */
.profile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.profile-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-item p {
margin: 0 0 8px 0;
font-family: Arial, sans-serif;
font-weight: bold;
color: #474747;
font-size: 16px;
}
.prof-picture {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}⚠️ 关键注意事项：
- 避免全局样式污染：切勿写 div { display: grid; } —— 这会无意间将所有 div（包括内部包装容器）变成网格，导致子元素错位。
- grid-template-columns 推荐用 1fr 1fr 1fr 或 repeat(3, 1fr)，比固定像素（如 100px）更具响应性；若需固定尺寸，也建议单独设宽高在子元素上。
- gap 是现代推荐属性（替代 column-gap/row-gap），简洁且兼容性良好（Chrome 66+ / Firefox 63+ / Safari 16.4+）。
- 图片容器需设 display: block，防止 <img> 默认的 inline 行内基线对齐引发底部空白。
✅ 总结
CSS Grid 的力量在于显式定义容器行为，而非依赖元素默认类型。通过为不同功能区块（如主图区、资料区）分配专属类名，并分别配置 display: grid 及其模板，即可精准控制布局流向。三图并排不再依赖 inline-block 或浮动，而是由 grid-template-columns 和 gap 原生保障对齐与间距——这才是现代 CSS 布局的最佳实践。
立即学习“前端免费学习笔记（深入）”；
