flex or grid columns based on (modulo) number of Items
So, I'm on a CMS / frontend where the content team can add a collection of cards (like: this is our contact team, these are our sponsors, ...).
These cards are listed by default with max 4 cards in a row. Then the next ones in the next row.
Now, here comes the problem:
It looks WAY better when if you've got 5 items you don't show 4 in the first row and just 1 in the last. But display 3 in the first one and 2 in the last.
Same for 13 items (4,4,3,2) - that's why modulo in the topic .
Is there a way to solve this CSS only (at least 2 items in a row) or if not (what I guess) - how would you create the JS and CSS setup (I'm using Vue, I know the numbers of items and can dynamically assign classes based on the modulo).
Currently the content team create different collections (a 3 items one and a 2 one) to archive this - but this is not a nice solution.
I'm currently thinking of: const rest = items.length % 4
if rest !== 1 -> everything is fine
if rest === 1 -> create a second list, where 2 items spliced from the original one and display them in a new flexed <div>
These cards are listed by default with max 4 cards in a row. Then the next ones in the next row.
Now, here comes the problem:
It looks WAY better when if you've got 5 items you don't show 4 in the first row and just 1 in the last. But display 3 in the first one and 2 in the last.
Same for 13 items (4,4,3,2) - that's why modulo in the topic .
Is there a way to solve this CSS only (at least 2 items in a row) or if not (what I guess) - how would you create the JS and CSS setup (I'm using Vue, I know the numbers of items and can dynamically assign classes based on the modulo).
Currently the content team create different collections (a 3 items one and a 2 one) to archive this - but this is not a nice solution.
I'm currently thinking of: const rest = items.length % 4
if rest !== 1 -> everything is fine
if rest === 1 -> create a second list, where 2 items spliced from the original one and display them in a new flexed <div>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
