本文详解如何用 css grid 正确实现三张图片水平并排布局，解决因选择器范围过广、嵌套结构混乱导致的对齐失效问题，并提供可直接运行的语义化代码示例。
要让三张图片真正“并排显示”在一行中，核心在于精准控制网格容器的作用范围——这是初学者最容易踩坑的地方。原代码中对所有
全局设置 display: grid，导致内部嵌套的 div（如 .names、.mutual-friends）也被强制变为网格容器，破坏了预期布局流。正确的做法是：为每组需要网格布局的元素显式添加专用类名（如 .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; } 防止段落默认上下边距撑开布局。
? 完整可运行代码（已优化结构与语义）
CSS Grid 三图并排示例 @@##@@@@##@@@@##@@⚠️ 注意事项与进阶提示
- 不要滥用通配符选择器：避免 div { display: grid; } 这类全局声明，务必限定作用域（如 .wrapper）；
- 图片宽高需与网格列宽协调：当前 grid-template-columns: 100px ×3，但图片设为 200px，实际会溢出。若需图片填满列，应设 width: 100%; height: auto; 并移除固定像素值；
- 响应式建议：可配合 @media 查询，在小屏下改为 grid-template-columns: 1fr; 实现堆叠；
-
语义化增强：用
+ 替代纯 更利于可访问性。掌握「容器专属化」和「样式责任分离」两大原则，CSS Grid 布局将变得清晰可控。多加练习，你很快就能自信驾驭复杂网格场景。
