JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="tiles">
  <div class="tile">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aliquam nobis tempora totam at culpa?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis tempore temporibus rerum, odit tenetur obcaecati magnam, dolore nostrum commodi quod ex, necessitatibus blanditiis pariatur quasi at accusantium officiis totam animi. Quas atque ipsa expedita provident.</p>
  </div>
  <div class="tile">
    <h3>Dicta ea reiciendis consequatur. Repellendus.</h3>
    <p>Explicabo dolor sunt, quo voluptatum quam laboriosam pariatur placeat amet repellendus veniam, velit facere minima.</p>
    <p>Ut dolorum similique adipisci totam facere, voluptatum at ex consectetur. Est quos odit, libero enim dolores, perspiciatis hic modi similique quo, qui rem quaerat eius, quia! Voluptatibus a dolorem veritatis aliquid iure consequuntur itaque earum!</p>
  </div>
  <div class="tile">
    <h3>Dolor autem consectetur ipsam accusamus.</h3>
    <p>Sed similique cupiditate dicta iste. Ab iste, fugiat impedit nisi at dolore, illum sunt. Nobis?</p>
    <p>Deserunt sint assumenda eum, ipsam tempora officiis accusantium officia deleniti quia, minus temporibus voluptatibus quae odio cupiditate quaerat quasi laboriosam tempore numquam, fugiat itaque iste molestiae. Optio, ex odit! Deserunt repudiandae quo iste aliquid voluptatem!</p>
  </div>
  <div class="tile">
    <h3>Veniam, modi, cupiditate. Esse, nesciunt.</h3>
    <p>Voluptatibus, veritatis, aliquid. In reiciendis, consectetur porro nobis sint. Iure reiciendis iste vel ut, nesciunt!</p>
    <p>Quod porro eius, hic nihil modi voluptatem, doloribus minus alias fugit odio sit distinctio unde, ducimus nobis a rem. Earum ut nulla, et illo. Commodi ipsum ea dolor dolores, labore consequuntur. Incidunt porro praesentium, veritatis!</p>
  </div>
  <div class="tile">
    <h3>Illum impedit ducimus, maxime incidunt.</h3>
    <p>Consequatur...

SCSS

div {
  box-sizing: border-box;
}

.tiles {
  display: flex;
  flex-flow: row wrap;
}

.tile {
  background: moccasin;
  padding: 0 1em;
  margin-bottom: 2em;
}

@media only screen and (min-width: 600px) {
  .tile {
    flex-basis: calc(50% - 1em);

    &:not(:nth-child(2n + 1)) {
      margin-left: 2em;
    }
  }
}

@media only screen and (min-width: 1000px) {
  .tile {
    flex-basis: calc(33% - 4em/3);

    &:nth-child(n) {
      margin-left: 0;
    }
    
    &:not(:nth-child(3n + 1)) {
      margin-left: 2em;
    }
  }
}

@media only screen and (min-width: 1200px) {
  .tile {
    flex-basis: calc(25% - 1.5em);

    &:nth-child(n) {
      margin-left: 0;
    }
    
    &:not(:nth-child(4n + 1)) {
      margin-left: 2em;
    }
  }
}