JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<h3>Space between - Flex</h3>
<div class="container flex">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">0</div>
</div>
<hr>

<h3>Space between - Grid</h3>
<div class="container grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">0</div>
</div>

SCSS

body {
  font-family: 'Lato', Helvetica, Arial;
  background-color: #fafafa;
  padding: 1rem;
}

.container {
  margin: 1rem;
  
  .box {
    padding: 1rem;
    border: 1px solid #999;
    text-align: center;
  }

  &.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .box {
      margin-bottom: .25rem;
      flex: 0 0 50px;
      box-sizing: border-box;
    }
  }

  &.grid {
    display: grid;
    grid-gap: .25rem 0;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(50px, auto));
    
    
    .box {
      /* nothing required */
    }
  }
}