JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="grid">
  <div class="column x1">x1</div>
  <div class="column x1">x1</div>
  <div class="column x2">x2</div>
  <div class="column x1">x1</div>
  <div class="column x2">x2</div>
  <div class="column x1">x1</div>
  <div class="column x2">x2</div>
  <div class="column x1">x1</div>
  <div class="column x1">x1</div>
</div>

CSS

.grid {
  overflow: hidden;
  background-color: lightgrey;
}

.column {
  float: left;
  border: 1px solid black;
  box-sizing: border-box;
}

.x1 {
  width: 25%;
  padding-top: 25%;
  background-color: green;
}

.x2 {
  width: 50%;
  padding-top: 25%;
  background-color: violet;
}

@media screen and (max-width: 580px) {
  .x1 {
    width: 50%;
    padding-top: 50%;
  }
  
  .x2 {
    width: 100%;
    padding-top: 50%;
  }
}

@media screen and (max-width: 380px) {
  .x1 {
    width: 100%;
  }
  
  .x2 {
    width: 100%;
  }
}