Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.

Image by Erik Lucatero from Unsplash

Flexbox equal height cards

Dec 1, 2020

Make all cards equal height with flexbox. Especially helpful when content is dynamic and can't set fixed height.

HTML

CSS

Flexbox was used on the container div to make all child cards equal height.
A card itself is also constructed with flexbox for column layout.
flex: 1 property expands height of the card content to keep button at the bottom for all cards.

Code real-world projects based on Figma designs.

spread the word

Did you like this post? Share it with the world! 🌐