<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

.grid {
  --gap: 20px;
  --column-size: 240px;
  --columns-amount: 2;
  
  --column-size-max: calc(100% / var(--columns-amount) - var(--gap));
  --column-size-min: min(var(--column-size), 100%); // prevent overflow

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--column-size-min), var(--column-size-max)), 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: minmax(170px, auto);
  gap: var(--gap);
  width: 90%;
  margin: 0 auto;
}

.card:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: -1
}

.card {
  padding: 20px;
  font-size: 20px;
  line-height: 1.3;
  border-radius: 12px;
  background-color: #0180AE;
  color: #fff;
}



body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin: 2rem 0;
}