How to develop a Responsive grid gallery using css3 Aspect Ratio

Question

How to create a responsive grid gallery. please check attached image

   <div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
  </div>

Answer 1

Seeing that all of your elements have same width, I would recommend you use flex with column direction and fixed container size:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    gap: 5px;
    height: 180px;

}

.big-box {
    height: 100px;
    width: 100px;
    border: 5px solid rgb(48, 48, 48);
}
.small-box {
    height: 50px;
    width: 100px;
    border: 5px solid rgb(48, 48, 48);
}

        <div class="container">
            <div class="big-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="big-box"></div>
            <div class="big-box"></div>
            <div class="small-box"></div>
            <div class="small-box"></div>
            <div class="big-box"></div>
        </div>