Pinterest-style layouts using CSS columns and grid
Uses CSS multi-column layout for automatic masonry effect
Uses column-count to create columns. Items flow naturally into columns, and break-inside: avoid prevents items from splitting across columns.
A stunning view of mountains at sunset with golden hour lighting.
Modern building design showcasing contemporary architecture.
Crystal clear water meeting sandy beaches under blue skies. Perfect vacation destination for summer getaways.
Winding trail through dense woodland.
Vibrant colors painting the evening sky with clouds catching the last rays of sunlight.
Nighttime cityscape illuminated.
Colorful blooms in full spring display.
Snow-capped summit reaching toward the clouds with dramatic alpine scenery and pristine wilderness.
Uses CSS Grid with auto-flow dense for masonry-like layout
Uses CSS Grid with fine-grained row sizing (grid-auto-rows: 10px) and items spanning multiple rows based on content height. grid-auto-flow: dense fills gaps.
Rolling sand dunes under a clear sky.
Dramatic seaside views.
Aurora borealis dancing across the night sky in spectacular fashion with vibrant greens and purples.
Palm trees swaying over turquoise waters.
Majestic cascading water falling from great heights through lush rainforest vegetation creating a misty magical atmosphere perfect for adventure seekers.
Milky Way overhead.
Red rock formations creating stunning vistas.
Endless wheat fields swaying in the breeze under summer sun with harvest season approaching.
Auto-fill grid with varying aspect ratios
Uses grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) to create a responsive grid that automatically adjusts the number of columns based on available space.