Flexbox: заполнить выбранный ряд и обернуть элементы ниже / выше, чтобы заполнить пространство

Question

Я пытаюсь настроить адаптивную сетку, чтобы при нажатии на элемент сетки он заполнял горизонтальное пространство своей строки и выдвигал другие элементы либо над ним, либо под ним.Чтобы заполнить оставшееся пустое место.

Вот мой текущий код, который заполняет строку, но оставляет пустое место.

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

Попробуйте это ...

$(".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>