what i have done

by Chandeep

HTML

<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>

CSS

.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%;
}