Q35: How does grid-auto-flow: dense packing work in CSS Grid?
grid-auto-flow: dense tells CSS Grid engines to fill empty layout gaps early in the grid matrix if smaller items appear later in HTML markup, maximizing space efficiency in irregular photo galleries.
Dense Packing Photo Gallery
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense; /* Backfills empty gaps automatically */
}💡 dense mode backfills empty grid spaces automatically with smaller subsequent gallery items.
Key Takeaways
- Packs smaller items into empty grid gaps created by larger multi-span items.
- Maximizes space efficiency in mosaic masonry-like layouts.
Knowledge Check
What is the primary effect of adding grid-auto-flow: dense to a grid container?