JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="tiles">
  <div class="tiles__tile">
    <h1>Lorem ipsum dolor sit.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis deserunt maxime qui delectus magni ex!</p>
  </div>
  <div class="tiles__tile">
    <h1>Quas atque, possimus tempore.</h1>
    <p>Magni facilis saepe id adipisci distinctio suscipit similique, quaerat totam accusantium! Eius eum maxime consequatur.</p>
  </div>
  <div class="tiles__tile">
    <h1>Libero reiciendis eligendi saepe.</h1>
    <p>Cumque, ab, laboriosam. Mollitia distinctio eius ipsam. A explicabo quas dignissimos, consequuntur, dicta sed quidem.</p>
  </div>
  <div class="tiles__tile">
    <h1>Sed id, nulla aspernatur.</h1>
    <p>Aspernatur fuga quis assumenda quam commodi architecto odit, vel deserunt obcaecati maxime, minus, tenetur veritatis.</p>
  </div>
  <div class="tiles__tile">
    <h1>Cumque, tempora molestiae saepe!</h1>
    <p>Excepturi qui doloremque iure unde quis magni tenetur aspernatur, fuga laborum itaque sint, laboriosam ipsum!</p>
  </div>
</div>

SCSS

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

* {
  box-sizing: border-box;
}

.tiles {
  display: flex;
  flex-flow: row wrap;
  
  &__tile {
    flex-basis: calc(33.333% - .667rem);
    margin-bottom: 1rem;
    
    &:nth-child(3n+2), &:nth-child(3n) {
      margin-left: 1rem;
    }
  }
  
  @supports (display: grid) {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    row-gap: 1rem;
    
    &__tile:nth-child(n) {
      flex-basis: auto;
      margin: 0;
    }
  }

}
.tiles__tile {
  border: 1px solid blue;
}