Problem: Multi-Line Clamp in Dynamically Sized Cards

hard

40 min

Try to clamp each card’s description to three lines to maintain visual alignment across a row of dynamically sized content cards.

Problem description

Create a row of content cards with variable text lengths. Clamp each card’s description to three lines, ensuring that the cards stay visually aligned despite differing amounts of content.

Goal

Truncate content in each card to three lines, enforcing consistent vertical space while allowing for flexible grid behavior.

Constraints

Use only HTML and CSS.
Grid should wrap based on available space.
Do not use JavaScript or fixed heights.

Sample visual output

Here’s what the output would look like: