Hello, I’m trying to build a card-style layout using <vaadin-grid>, similar to what you’d see in a product gallery or dashboard, where each item appears as a card with multiple details (e.g., name, category, price, stock). I’ve attached two images to show what I mean:
Image 1: What I’m trying to achieve – a responsive grid of cards.
Image 2: The standard list-style layout with rows (current behavior).
I want each row in the grid to be displayed as a “card”, and I’d like them to wrap across the page responsively, so that on wide screens I get multiple cards per row (e.g., 3 or 4), and on smaller screens it gracefully stacks to fewer columns.
Can <vaadin-grid> be adapted to support this style?
Thanks in advance fro any help
I’ll take a look at the vaadin-virtual-list. My idea, using only vaadin-grid, was to have a switch that would change the grid’s view type from a list to a card grid conditioning the rendering of a single column using the columnBodyRenderer directive.
When it’s just 16 cards to be displayed, you should be fine with using a flex layout, that wraps, like a HorizontalLayout plus the respective config.
The switch between grid/list view and card view has to be done by you (by exchanging the respective components), but the result should be what you need.
The grid itself is not really suitable for both scenarios and I would not try to hack or workaround it to a way that it might work, since there might be unwanted side effects or future breaks.
