Intermediate LevelCSS & Modern Layouts
How does grid-auto-flow: dense work and what is the CSS masonry proposal?
❓ Interview Prompt: Explain grid auto-placement algorithms, the dense keyword, and the upcoming masonry layout.
grid-auto-flow:
Controls how auto-placed items fill the grid:
•
row (default): Items fill rows left-to-right.•
column: Items fill columns top-to-bottom.•
dense: Backfills gaps caused by spanning items, potentially reordering visual display.Dense Use Case:
When grid items span multiple columns/rows, gaps may appear. dense tells the browser to rearrange smaller items to fill those gaps, creating a packed layout.
CSS Masonry (Upcoming):
A proposed CSS Grid feature (grid-template-rows: masonry) that creates Pinterest-style layouts natively. Items stack vertically to fill columns without explicit row sizing.
Code Implementation Example
css
/* Dense packing fills gaps */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-flow: dense;
gap: 12px;
}
.gallery .featured {
grid-column: span 2;
grid-row: span 2;
}
/* Future masonry (experimental) */
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 16px;
}💡Dense grid packing and experimental masonry layout.
🎯 Interview Key Takeaway
grid-auto-flow: dense backfills visual gaps in grids with spanning items, creating compact gallery layouts.
#Grid#Auto Flow#Masonry#Intermediate
Back to all CSS & Modern Layouts Questions→