JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

.container {
  display: flex;  

  @supports(display: grid) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
  }
  
  > div {
    flex: 1;
    padding: 1rem;
    background: red;
  }
}