MoreLesson 208Free preview

Equal Height

This lesson is part of How To · All levels

Summary

Equal height means that several columns or cards have the same height even though their contents differ in length. Flexbox solves this automatically because align-items: stretch is the intrinsic value that makes the item fill the high row. Alternatively, the grid also produces uniform heights on single-line cells.

Key points

Flexbox makes single-line items equal in height by default through align-items: stretch
Avoid rigid fixed heights; use min-height when lower boundaries are needed
Grid with align-items: stretch also equals the height of the cell in one row
Use height: 100% only if the mother has a clear height

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.