嘿，作为新手能自己尝试用Grid布局已经超棒了！我完全get到你的问题：想把6张图片分成两列3行，整体靠右排列，但现在列之间的间距不对，甚至页面宽度变化时间距还会变大。咱们一步步来解决~

先分析现有代码的问题根源 #

1. 单个图片的margin-left:70%是核心干扰项：你给每张图片加了这个属性，会让每张图片自己往右侧偏移父容器宽度的70%，直接打乱了Grid的列布局逻辑，导致列之间出现莫名其妙的大空隙
2. Grid列宽与对齐设置不匹配需求：grid-template-columns: repeat(2,3fr)会让列宽随父容器宽度被拉得很宽；同时justify-content: center是让网格居中，和你“靠右”的需求相反
3. 百分比偏移导致响应式混乱：margin-left:70%是相对父容器宽度的，页面宽度变化时偏移量也会跟着变，所以才会出现“移动时间距变大”的问题

修改后的完整代码 #

HTML部分（保持不变）

<div class="skill-pictures">
  <img src="Imagenes-Skills/HTML.png" alt="HTML" />
  <img src="Imagenes-Skills/CSS.png" alt="CSS" />
  <img src="Imagenes-Skills/JavaScript.png" alt="JS" />
  <img src="Imagenes-Skills/Github.png" alt="GH" />
  <img src="Imagenes-Skills/API.png" alt="API" />
  <img src="Imagenes-Skills/PowerBi.png" alt="PowerBi" />
</div>

CSS部分（关键修改）

.skill-pictures {
  display: grid;
  /* 让列宽自适应图片宽度，避免列被无意义拉宽 */
  grid-template-columns: repeat(2, auto);
  /* 固定列/行之间的间距，不会随页面变化 */
  gap: 10px;
  /* 让整个两列网格在容器内靠右排列 */
  justify-content: end;
  /* 可选：让容器本身在父容器中靠右（如果父容器占满页面宽度） */
  margin-left: auto;
  border: 1px solid grey;
  /* 可选：限制容器最大宽度，让布局更紧凑 */
  max-width: fit-content;
}

.skill-pictures img {
  width: 150px;
  height: auto;
  display: block;
  border: 1px solid black;
  /* 移除干扰布局的margin-left:70% */
}

改动点说明 #

1. 移除图片的margin-left:70%：把布局控制权交还给Grid，让它按照两列规则自动排列图片，避免手动偏移导致的混乱
2. 调整Grid列宽为auto：让每列宽度刚好适配图片的150px宽度，列之间的间距就是你设置的gap:10px，不会随意变大
3. 修改网格对齐方式：justify-content: end让整个两列网格在容器内靠右；如果希望容器本身在页面中靠右，再加margin-left: auto
4. 可选的max-width: fit-content：让Grid容器的宽度刚好包裹住所有图片，不会占满整个父容器，让布局更紧凑

额外小提示 #

• 如果想要图片组和右侧有留白，不用偏移图片，直接给Grid容器加padding-right: 20px即可
• 测试时可以保留border属性，能更直观看到容器和图片的布局范围，没问题后再去掉
• 以后遇到布局问题，建议先去掉手动的margin/padding偏移，先让布局系统（Grid/Flex）自己工作，再微调细节

慢慢试，每改一个属性就刷新页面看效果，很快就能摸透布局逻辑啦😎