弹性列容器中项目之间的间距

Question

我有一个网格父级布局，每个子项都作为具有列布局的弹性框。我能够将项目放置在伸缩框的中心，但是无法在元素之间定义正确的间距。我希望这些物品足够接近，看起来不错，但不要那么接近。 Here is my fiddle

如果看到这个小提琴，则图标（Insta）和其他两个文本相距很远。如何响应性地定义间距，以便在加载到电话时也不会断开。

 .wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }
    
    .box {
      display: flex;
      border:1px solid black;
      flex-direction: column;
      flex-wrap: wrap;
      align-items:center;
      gap:10%;
    }

<div class="wrapper">
      <div class="box a">
        <img src="https://img.favpng.com/9/25/24/computer-icons-instagram-logo-sticker-png-favpng-LZmXr3KPyVbr8LkxNML458QV3.jpg" width="50%" height="50%"/>
        <p>
        Insta
        </p>
        <p>
        Take photos
        </p>
      </div>
      <div class="box b"></div>
      <div class="box c"></div>
      <div class="box d"></div>
      <div class="box e"></div>
      <div class="box f"></div>
    </div>