Possible to have dynamic css/bootstrap content inside box depending pn number of elements?

For my example let's say I have a box container(div) that houses a dynamic amount of small cards(divs). Also for the solution I can use modern css. Thanks!

I want my styling to move the cards down to another row when there is more than 3. I know I can do that with col-4, But I also need to preserve the flex side of it because if there 5 it needs to be 3 on top then 2 on bottom.

At 1 it must expand whole column so 100,

At 2 is 50/50,

At 3 it must be 33/33/33,

This is where it gets tricky:

At 4 it must be row 1 50/50 and row 2 50/50.

At 5 it should be row 1 33/33/33 and row 2 50/50

At 6 it should be row 2 33/33/33 and row 2 33/33/33, or could be 3 rows at 50/50

Max I'll have is 6

<div class="row">  
    <!-- this looks fine when I have under 3 cards... When I have 4+ is squished --> 
    <div v-for="data in someData" class="col"> 
        <div class="card m-0 mt-3">
            <div class="card-body pt-1 pr-1">
                <div v-if="canEdit">                     
                    <div class="float-right mr-1">
                        <i class="bi bi-pencil psa-bi-action"></i>
                        <i class="bi bi-trash psa-bi-action"></i>
                    </div>                                                             
                </div>
                <div class="mt-3 card-text font-weight-600">
                    {{data}}
                </div>
                <p class="m-0"><small>{{data}}</small></p>
            </div>
        </div>
    </div>
</div>