JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>



<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>

</div>

CSS

html {
  font-size: 62.5%;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  grid-template-rows: repeat(2, 20rem);
  grid-gap: 1rem;
  
  border: 1px solid lightgrey;
  padding: 1rem;
}

.item {
  background: lightblue;
}