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.

Build real-world projects with professional designs, powered by GitHub automation.

spread the word

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