1
HTML/CSSIntermediate#css#layout-puzzle
HTML/CSSBeginner#css#flexbox#layout-puzzle
How do you create equal-height columns?
With Flexbox, columns are equal height by default (align-items: stretch) since flex items stretch to fill the cross axis. With Grid, all cells in a row are naturally equal height too. This eliminates old hacks like large negative margins or JavaScript.
Example
.row { display: flex; } /* children automatically stretch to the tallest column's height */
.col { flex: 1; padding: 16px; background: #f0f0f0; }