JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 8px;
  @media (max-width: 799px) {
    grid-template-columns: minmax(max-content, 1fr);
  }
  @media (min-width: 800px) {
    .vueReportingDashboard__eventBreakDown,
    .vueReportingDashboard__alertBreakdown {
      grid-column: auto / span 2;
    }
  }
}

.container>div {
  background-color: gray;
  text-align: center;
}