如何用CSS Grid实现3张小图并排？对齐异常求助

核心问题 #

1. 全局div的Grid样式污染：给所有div都设置display: grid和固定列宽，导致内部的inline、names等容器被强制转为Grid布局，完全打乱了预期结构。
2. Grid列宽与图片尺寸不匹配：最外层Grid列宽设为100px，但图片宽度是200px，超出列宽直接导致布局错位。
3. 结构组织不合理：把所有大图、名字、小头像分开嵌套，没有让每个卡片（大图+名字+小头像）作为独立Grid项，自然无法实现对齐。
4. 小头像硬编码margin-top：固定的margin-top无法适配布局，会引发对齐偏差。

修正后的代码 #

CSS 部分

p {
  font-family: Arial;
  font-weight: bold;
  color: rgb(71, 71, 71);
  font-size: 16px;
  margin: 8px 0; /* 调整段落边距，避免间距过大 */
}

/* 仅给卡片容器添加Grid布局，而非所有div */
.card-container {
  display: grid;
  grid-template-columns: repeat(3, 200px); /* 列宽匹配图片宽度 */
  column-gap: 24px; /* 合理调整列间距，原124px过大 */
}

/* 每个卡片内部用Flex垂直排列元素 */
.card {
  display: flex;
  flex-direction: column;
}

.cat, .cat2, .dog {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.prof-picture {
  width: 29px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  /* 移除硬编码margin-top，改用Flex实现对齐 */
}

/* 名字与小头像容器用Flex水平对齐 */
.name-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}

HTML 部分

<body>
  <!-- 用专门容器包裹所有卡片 -->
  <div class="card-container">
    <!-- 第一个独立卡片：大图+名字+小头像 -->
    <div class="card">
      <img class="cat" src="Exercícios/cat.jpg">
      <div class="name-avatar">
        <p>Oliver</p>
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>
    </div>
    <!-- 第二个独立卡片 -->
    <div class="card">
      <img class="cat2" src="Exercícios/cat2.jpg">
      <div class="name-avatar">
        <p>Mimi</p>
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>
    </div>
    <!-- 第三个独立卡片 -->
    <div class="card">
      <img class="dog" src="Exercícios/dog2.jpg">
      <div class="name-avatar">
        <p>Snow</p>
        <img class="prof-picture" src="Exercícios/dog.jpg">
      </div>
    </div>
  </div>
</body>

关键调整点 #

• 取消全局Grid样式：仅给需要的容器（card-container）添加Grid布局，避免影响内部元素结构。
• 重构卡片结构：每个卡片作为独立Grid项，确保大图、名字、小头像属于同一单元，自然实现对齐。
• 用Flex替代硬编码边距：卡片内部垂直排列，名字与小头像水平居中对齐，解决margin-top导致的错位问题。
• 匹配列宽与图片尺寸：Grid列宽设为200px，与图片宽度一致，避免内容溢出引发的布局混乱。

内容的提问来源于stack exchange，提问作者olamundo97