Hey there @handshaper!
Let’s see if I can’t clear some of these things up for you as well as get some more info and such to help answer some of your questions as well…
Firstly, in the deck mode there is no way of controlling how many “columns” the deck has…
You can add more Cards to a Card Deck using the blue plus button at the bottom of the stack, as seen here:
You can remove Cards from a Card Desk by just highlighting the card you wish to remove and deleting it.
The Cards in a deck are all on one row, as this is how the Card Deck is designed to work. The Card Deck groups Cards for the purpose of keeping them together on the Tablet and Desktop breakpoints. You control the number of columns in that row of Cards by adding or removing them from that particular Card Deck.
…this creates a very narrow set of cards, if you have more than a certain number.
This is true. When building your page you will want to control the number of Cards you have in any particular Card Deck to make a pleasing display. My suggestion would be no more than 4-5 Cards in a Card Deck for the average setup. But you millage may vary depending on your page’s setup.
The only workaround I can find is to use card deck for each row and then only put the number of cards into the deck that you initially want in the row.
That is indeed the way it works. The Card Deck isn’t a grid setup, which I think you might be wanting. The Flow mode for the Card Deck is a grid-like setup, but it too is not a grid, but rather a Masonry-like layout.
The other bigger problem is that if I place two identical cards, with top images, in a card deck, when they are displayed side by side one image will be taller than the other.
This is thanks to the browser trying to round widths to the closet possible whole number. Since we’re talking about responsive layouts, widths are all percentage based. Each of the “columns” in the Card Deck will be a percentage of the width of the container they’re in. If that percentage creates a weird decimal, it may be rounded to a width that is within 1px of the others. This would result in the image being a little less tall since the images are also responsively sized – their height is automatically determined by their aspect ratio and their width.
All that so say that the browser tries its best to round to the correct decimal and still make everything fit properly, and it is not coming out exact. And to make things better, some browsers determine where to start rounding these widths in different ways, so they’re not all the same.
What is even more worrisome is that this does not always happen, so for instance if there are only two cards it will happen, but if you then add another card it goes away!
If you were to also scale the width of the browser down slowly, you’d notice it change then, too. This is again the browser doing math on the fly and not being able to always get it precisely right.
I love cards but I feel the need for something like the card deck that offers just a little bit more control. I have tried using a third party stack (GRID from Doobox) and it works a lot better but it has problems if any of the cards have a slider in them as it is not able to correctly calculate the height of a row so it ends up cropping the bottom of a card.
I’ve not used that stack, so I can’t speak to how it works, or how it works with Foundry’s Card stack.
The Card Deck has a specific use, and that is to group Cards in equal height rows (or in a Masonry layout like with the Flow mode). If you don’t need equal height Cards, you could use a Columns stack. But again, like with all responsive, percentage-based layouts, the browser is the one doing the math and it isn’t always as precise as we wish it was.
Hopefully that helps some. Sorry for writing a tome.
