Q44: What is CSS Masonry layout and how does grid-template-rows: masonry work?
The CSS Masonry specification allows building Pinterest-style layouts where items with varying heights pack tightly vertically without leaving empty row gaps. Setting grid-template-rows: masonry on grid containers replaces rigid row alignments with dynamic vertical packing.
Native Masonry Grid Setup
.masonry-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 1rem;
}💡 grid-template-rows: masonry dynamically packs varying height gallery cards vertically without empty spaces.
Key Takeaways
- Packs irregular height grid cards vertically without empty row gaps.
- Eliminates complex JavaScript Pinterest-style masonry grid libraries.
Knowledge Check
What layout behavior does grid-template-rows: masonry provide?