Quasar: q-card and gutter

[erhanturan]

Hello,

This is a feature request but if there is a workaround, I can happily apply that, as well. I would like to explore a different stacking option for cards when used with q-gutter. Normally, a second row of cards are aligned below the tallest element in a given row of cards there (i.e. the first row of cards). However, it would be a nice option if a card stacked right below the card element above it, regardless of the whole row. Like train-wagons along a railway and there are multiple railways. Please see the image below for description:

The relevance for my quasar application is that, I'm using expansion items within cards, hence whenever the expansion item is activated, whole row below is shifted. I would prefer moving only the card that is below the expanded card compared to whole row. That might be more user friendly.

Maybe combinations of col-x's, col-autos, flex features etc... would give the same effect but that might be to tedious and hard to make responsive.

Thanks,
Erhan

[smolinari]

FYI. https://tobiasahlin.com/blog/masonry-with-css/

Scott

[rstoenescu]

Hi,

Also, if you know that all your cards have the same width, then you can use a "column" (WITHOUT "no-wrap") and it will fill cards horizontally then switch to next column when no space is available.

[pdanpdan]

Try this approach, it should work:
https://codepen.io/pdanpdan/pen/eYYgXOb?editors=1010