JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Один элемент в последнем ряду</h2>
<div class="grid">

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

</div>

<h2>Два элемента в последнем ряду</h2>
<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>

CSS

.grid {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -5px 0 -5px;
}

.grid__item {
  flex: 0 0;
  flex-basis: calc(33.333333% - 10px);
  margin: 0 5px 10px 5px;
  height: 100px;
  background: grey;
}