Tune responsive layouts

Choose row height, column count, spacing, and container breakpoints.

Nuxt Photo resolves responsive album values from the album container, not the browser viewport. Start with a small set of values that match the available content width.

Choose a layout

Layout	Use it when
Rows	Mixed image shapes should expand to fill each horizontal row.
Columns	Reading order and a fixed number of equal-width columns matter.
Masonry	Visual density matters more than strict row-by-row reading.

Set values by container width

Nuxt auto-imports responsive():

vue

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

Each key is a minimum container width in pixels. The largest matching key wins.

Tune rows

targetRowHeight is the preferred row height. A larger value places fewer photos in a row; a smaller value places more.

vue

<PhotoAlbum
  :photos="photos"
  :layout="{
    type: 'rows',
    targetRowHeight: responsive({ 0: 160, 768: 220, 1200: 280 }),
  }"
/>

Check the actual collection. Portrait-heavy and landscape-heavy sets can need different targets at the same width.

Tune columns and masonry

Both layouts use the columns option:

responsive({
  0: 2,
  640: 3,
  1024: 4,
  1440: 5,
})

Use fewer columns when captions need room or most images are portraits.

Keep spacing restrained

Start with 4 px on narrow containers and 8 to 12 px on wider containers:

vue

<PhotoAlbum :photos="photos" :spacing="responsive({ 0: 4, 768: 8, 1200: 12 })" />

padding adds space inside each item. It does not replace the gap between items.

Use functions only for continuous values

vue

<PhotoAlbum
  :photos="photos"
  :spacing="(width) => Math.round(Math.max(4, Math.min(16, width / 80)))"
  :breakpoints="[320, 640, 1024, 1280]"
/>

Function values do not expose breakpoint metadata. Add explicit breakpoints when client measurement should snap to a stable set.

Verify the layout

Test the album inside its real parent at narrow, medium, and wide widths. Check that captions fit, reading order is clear, and the server assumption does not produce a visible hydration change.

Layouts and responsive values defines the value forms. SSR and layout stability explains defaultContainerWidth and breakpoint snapping.