Layouts and responsive values

PhotoAlbum provides three layouts. Numeric layout options can respond to the album container instead of the whole viewport.

Choose a layout

Rows are the default. Use columns when column count matters more than balanced height. Use masonry when photos have varied aspect ratios and uneven columns are acceptable.

Find the right album layout

Resize the container and compare the three layout strategies.

Reset

560px container

PhoneContentWide

Code State

Copy

<PhotoAlbum
  :photos="photos"
  :layout="{ type: 'rows', targetRowHeight: 220 }"
  :spacing="8"
  :lightbox="true"
/>

{
  "layout": "rows",
  "containerWidth": 560,
  "spacing": 8,
  "rowHeight": 220
}

Responsive values

The responsive() helper creates a value from minimum container widths:

<PhotoAlbum
  :photos="photos"
  :layout="{
    type: 'columns',
    columns: responsive({ 0: 2, 768: 3, 1200: 4 }),
  }"
  :spacing="responsive({ 0: 4, 768: 8, 1200: 12 })"
/>

At 700 pixels the album uses two columns. At 900 pixels it uses three. The largest matching minimum width wins.

responsive() can configure spacing, padding, row targetRowHeight, and column or masonry columns. It does not switch the layout type.

See container-based responsiveness

The album responds to its own width, not the browser viewport.

Reset

560px container

PhoneContentWide

560900

Code State

Copy

<PhotoAlbum
  :photos="photos"
  :layout="{
    type: 'columns',
    columns: responsive({ 0: 2, 560: 3, 900: 4 }),
  }"
  :spacing="responsive({ 0: 4, 560: 8, 900: 12 })"
  :breakpoints="[560, 900]"
/>

{
  "containerWidth": 560,
  "activeBreakpoint": 560,
  "columns": 3,
  "spacing": 8,
  "snap": true
}

Container width, not viewport width

A 700-pixel album uses the 700-pixel value even when the browser window is much wider. This makes the same album work inside full pages, cards, and sidebars.

For a formula, pass a function that receives the container width:

<PhotoAlbum :photos="photos" :spacing="(width) => (width < 640 ? 4 : 12)" />

Use defaultContainerWidth when the server should render a specific responsive branch.