How to achieve the same size of cards?

Question

css

Hello everyone!) I had a problem creating cards. I create a list of 8 elements, remove the margin-rigth from the far right, and remove the margin-right and margin-bottom from the last one. The problem is that if I set a strict height, all cards are even, but when the card overflows, the text crawls out of the bottom edge (screen 1 and 2).


And if I set the minimum height (so that the cards stretch), then the last card increases taking into account the missing margin (screen 3 and 4).


Can you tell me how to make it right so that the cards can withstand overflow and be the same size?
And maybe someone has useful links to the lesson on card layout using flexbox?

Answer 1

Don't use margin. For indents between elements, there is a gap property . Works with both flex and grid