All Patterns

Gallery – Chronicle

Gallery – Chronicle

A responsive image gallery with support for mixed-height images using CSS Grid.

Grid Breakpoints

Viewport Columns Row Height
Desktop (900px+) 4 columns 200px
Tablet (601–900px) 3 columns 200px
Mobile (≤600px) 2 columns 160px

Keeping the Grid Symmetrical

The grid uses grid-auto-rows for uniform row heights. To avoid empty gaps:

  • Desktop (4 columns): Use 7 images with 1 tall image, OR 8 images with no tall images
  • Tablet (3 columns): The 5th image automatically spans 2 rows to fill the gap
  • Mobile (2 columns): Images stack evenly in pairs

Tall Image (Spans 2 Rows)

Add the class gallery-chronicle__item--tall to make any image span 2 rows vertically.

Default: The 2nd image has this class applied.

Tip: Position tall images early in the grid (items 1-3) for best results across breakpoints.

Recommended Image Counts

Images Tall Items Result
7 1 (item 2) Perfect 4-col grid, 2 rows
8 0 Perfect 4-col grid, 2 rows
11 1 (item 2) Perfect 4-col grid, 3 rows

Adding/Removing Images

When modifying the gallery:

  1. Duplicate or delete .gallery-chronicle__item elements
  2. Check all breakpoints to ensure no gaps appear
  3. Adjust tall item position if needed