<!--
https://codepen.io/kevinpowell/pen/jOQeqZJ
-->

<div class="flexi-grid">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>

</div>


<style>
 * {
  box-sizing: border-box;
}

.flexi-grid {
  margin: 2rem auto;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  border: 2px solid hotpink;
}

.flex-item {
  padding: 2rem;
  background: lightblue;
  border: 4px solid royalblue;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: calc(25% - (3rem / 4));
  /* 25% for each one, but we have 3rem gap
     which we need to split across the 4 items */
}
</style>