Making a responsive grid of cards in Vuetify

Question

I'm trying to create a responsive grid with cards in Vuetify. Every card must be the same size but if I add a long text under it (second card), the card is always the max size (I also make this with breakpoints but Vuetify only has 5 breakpoints and I would need it more. I could add a custom breakpoint for every column but that is a bit ugly solution).

Also last row must be aligned to the left like in the sketch below. I tried a lot of things but I want to use min-width and max-width so the gap between the cards would, in most cases, be the same. It should look something like this:

Here is my codepen.

Answer 1

Those card that have text too long won't resize becaues they don't recognize the parent width so the card width then just become maximum value. I fixed this by giving him absolute value and with some css I fixed it. Alignment at the end I fixed by just adding blank transparent cards so they are alignet correctly. Here is the solution in the codepen