编写响应式CSS时如何保持元素之间的间距相同？

Question

晚上好。我有三个SVG文件，包括2个袖子和一个衬衫主体。

Shirt Layout with CSS-Grid

Desired Result

对于CSS-Grid尝试，SVG文件每个都放置在div元素中，第二个图像显示了下面发布的HTML。问题在于，随着屏幕尺寸的增大，元素彼此远离或移动得太近，最终重叠。like this我尝试使用CSS Grid来放置元素，效果很好，但不能解决我的问题问题，因为我无法为网格设置负的间隙或边距。我已经尝试过使用％以及vw和vh以及绝对和相对位置，但是到目前为止无法使它适用于所有分辨率。

.containerShirt {
  background-color: white;
  width: 100vw;
  height: 400px;
  position: relative;
  border: 1px solid black;
}

.shirtLeft {
  position: relative;
  height: 13%;
  left: 26.9%;
  bottom: 15vh;
  /* border: 1px solid black; */
  z-index: 2;
  /* border: 1px solid black; */
}

.shirtBody {
  position: relative;
  height: 40%;
  width: 35%;
  left: 13%;
  /* border: 1px solid black; */
  z-index: 1;
  /* border: 1px solid black; */
}

.shirtRight {
  position: relative;
  bottom: 24%;
  height: 13%;
  right: 1%;
  bottom: 15vh;
  /* border: 1px solid black; */
  z-index: 1;
  /* border: 1px solid black; */
}

<div class="containerShirt">
  <svg class="shirtLeft"> ..... </svg>
  <svg class="shirtBody"> ..... </svg>
  <svg class="shirtRight">..... </svg>
</div>

关于我能做什么的任何想法？非常感谢。

Answer 1

https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/