如何使用 CSS Grid 将三张图片并排显示

11次阅读

本文详解如何通过 css grid 正确实现三张图片水平并排布局，解决因全局 `div` 应用 `display: grid` 导致结构错乱的问题，并提供语义清晰、可复用的 html/css 实践方案。

要让三张图片真正“并排显示”在一行中，核心在于精准控制网格容器的作用范围——不能对所有

统一设置 display: grid（如原代码中 div { display: grid; … }），否则嵌套的 div（如 .names、.mutual-friends）也会被强制变为网格容器，破坏预期布局层次。

✅ 正确做法是：为每组需网格布局的元素显式添加语义化类名，并仅对该类应用 Grid 样式。

以下是一个结构清晰、职责分明的实现方案：

1. html 结构优化（语义化 + 层级明确）

           @@##@@
     @@##@@
     @@##@@
   
                   Oliver
立即学习“前端免费学习笔记（深入）”；
       @@##@@     
            Mimi
       @@##@@     
            Snow
       @@##@@

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，防止默认的 inline 行内基线对齐引发底部空白。

✅ 总结

CSS Grid 的力量在于显式定义容器行为，而非依赖元素默认类型。通过为不同功能区块（如主图区、资料区）分配专属类名，并分别配置 display: grid 及其模板，即可精准控制布局流向。三图并排不再依赖 inline-block 或浮动，而是由 grid-template-columns 和 gap 原生保障对齐与间距——这才是现代 CSS 布局的最佳实践。

如何使用 CSS Grid 将三张图片并排显示