CSS Flexbox and gap properties

\<div class="container-7"\>\<div class=" box box1"\>\</div\>\<div class="box box1"\>\</div\>\<div class="box box1"\>\</div\>\<div class="box box1"\>\</div\>\<div class="box box1"\>\</div\>\<div class="box box1"\>\</div\>\<div class="box box1"\>\</div\>\</div\>.container-7 {display: flex;flex-direction: column;column-gap: 24px;}box  {height: 100px;flex-basis: calc(25% - 24px);flex-grow: 1;flex-shrink: 1background-color: orchid;}

I have seven containers. After giving flex basis: calc (25% - 24px), i have first four containers in the first row and the next three. I want the next three in the second row but in the centre of the row. How can i achieve this?