Flexbox: Fill clicked row and wrap elements below/above to fill space - html

Question

I am trying to set up a responsive grid so that when you click on a grid-item, it fills the horizontal space of its row and pushes the other items either above it or below it. To fill the remaining empty space.
Here's my current code which does fill the row but leaves empty space.
JSFIDDLE
$(".box").click(function() {
$(this).toggleClass("enlarge");
});
body {
margin: 0;
}
.enlarge {
flex-basis: 100% !important;
}
.boxes {
display: flex;
flex-wrap: wrap;
}
.boxes .box {
flex-basis: calc((100% / 3) - 2rem);
margin: 1rem;
height: 200px;
box-sizing: border-box;
text-align: center;
transition: all 1s;
background-color: rgb(220, 220, 220);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 1

Try this...
$(".box").click(function(){
$('.box').removeClass("enlarge");
$(this).toggleClass("enlarge");
});
body {
margin: 0;
}
.enlarge {
flex-basis: 100% !important;
}
.boxes {
display: flex;
flex-wrap: wrap;
}
.box {
flex-basis: calc((100% / 3) - 2rem);
flex-grow:1;
display:flex;
margin: 1rem;
height: 200px;
box-sizing: border-box;
text-align: center;
transition: all 1s;
background-color: rgb(220, 220, 220);
align-items:center;
justify-content:center;
}
<div class="boxes">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>