Search⌘ K

Masonry-Style Responsive Grid

Explore how to create a responsive masonry-style grid layout using CSS Grid. Learn to use grid-auto-flow dense and configure columns for mobile, tablet, and desktop views. Understand how to adjust item heights with grid-row spans for a flexible, gap-filled layout.

Problem description

Create a grid container that:

  1. Displays items in a masonry-like layout.

  2. Packs items densely to fill gaps (grid-auto-flow: ...