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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.