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

Issue

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>

Solution

Wow I was able to solve this pretty quick by using a custom row split using my front-end framework. Not a CSS solution but it does the job. I'm still curious to see if there is a CSS solution. Thanks!

<!-- New row every 3 items or when there is 4 items do 2 rows 50/50 -->
<div class="w-100" 
v-if="( idx === 2 && data.length === 4)  || (idx % 3 === 0 && data.length !== 4)">
</div>

Answered By - RedLotus