Search⌘ K

Masonry-Style Grid with Equal Column Widths

Explore how to implement a CSS-only masonry style grid that uses equal-width columns and dense packing to display variable-height cards seamlessly. Understand how to calculate row spans and use grid auto-placement for responsive, gap-free layouts without any JavaScript.

Problem description

A .grid container holds multiple .card elements of varying heights. The task is to:

...