CSS Grid Layout Gallery

Foggy beach with a large rock formation
Living room with a white couch and round window
Table topped with plates and bowls of food
Building with a red door and tree
Row of white apartment buildings
View of beach from hilltop

About This Grid Layout

Grid Structure: This layout uses CSS Grid with named grid areas to create a complex, asymmetric design where images span different numbers of rows and columns.

Responsive Design: On mobile devices, the layout switches to a single column. On tablets (sm breakpoint), it becomes 2 columns. On desktop (md and above), it displays the full 5-column grid with custom spanning.

Key Features:

  • Images 1 and 2 span 2 columns and 2 rows (left side)
  • Image 3 spans 1 column and 1 row (top center)
  • Image 4 spans 1 column and 3 rows (vertical middle)
  • Images 5 and 6 span 2 columns and 2 rows (right side)
  • Hover effects with scale and gradient overlay
  • Consistent gap spacing between grid items
  • Rounded corners and shadows for modern appearance