JSFiddle - React, Tailwind, and code Playground

HTML

<code>display: none</code>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

<br>

<code>visibility: hidden</code>
<div class="container">
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
</div>

<br>

<code>visibility: collapse</code>
<div class="container">
  <div class="box box9">9</div>
  <div class="box box10">10</div>
  <div class="box box11">11</div>
  <div class="box box12">12</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px dashed black;
}

.box {
  height: 50px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}