JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

SCSS

.grid {
  $gap: 10px; // Значение переменной отступа
  
  display: flex;
  flex-flow: row wrap;
  margin: 0 -#{$gap/2};
  // Вычитаем отступ, чтобы прижать элементы к краям
  
  &__item {
    flex: 0 0;
    flex-basis: calc(20% - #{$gap});
    // Вычитаем отступы из ширины
    margin: 0 #{$gap/2} #{$gap} #{$gap/2};
    // Отступы
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 #ddd;
    border-radius: 3px;
  }
  
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}