\<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: 1
background-color: orchid;
}
I have a total of seven containers. When applying flex basis: calc (25% - 24px), the first four containers are positioned in the first row and the remaining three in the second row. To center the last three containers within the second row, one approach would be to adjust the CSS properties by adding extra styles or classes to the specific elements.