Masonry

Available as: Web ComponentShortcodeOxygen Element

Arrange images in a masonry layout.

<spx-masonry columns="5" gap="12px"> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/andre-benz-RRshxnCn8Lk-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/beasty--HxIhfS_dUk-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/domenico-loia-BkEF69vp3Ck-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/erol-ahmed-FTy5VSGIfiQ-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/ian-dooley-aaAllJ6bmac-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/jason-briscoe--T0La6F_WrE-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/jing-xi-lau-3ccEU_8ddog-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/leo-manjarrez--vygi0Cvz_c-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/michele-tardivo-UyiDcG_AXXs-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-Dv2n1Tv_WcI-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/mike-yukhtenko-NB9XC3h_jWo-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/nichlas-andersen-ZFXrgzHu1KU-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/niti-k-Ie430IZPF90-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/ryan-spencer-WJDR8_QxVR8-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/s-o-c-i-a-l-c-u-t-9b2KOWOP0OY-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/scott-webb-TYso4-CK-as-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0_x2PkKmx1Q-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-0aFrSMJ3i-g-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-8FUD82rlJxs-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-93J0T3YU6io-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-GnHUOyPV0WI-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Gruxs0ZQw7E-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-Km8L8QoJIq8-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/simone-hutsch-MO2tsiJ5Bek-unsplash.jpg" /> <img src="https://mk0spacepresswlntuem.kinstacdn.com/wp-content/themes/spx-child/assets/images/playground/zdenek-klein-mQAaKT4SuU4-unsplash.jpg" /> </spx-masonry>

Properties

bp-columns

Type: string

Columns for different screen sizes. Example value: 1000:3;600:2 - this will switch to a three column layout when the screen size is under 1000px and to a two column layout under 600px.

columns

Type: numberDefault: 4

Number of columns.

gap

Type: stringDefault: '10px'CSS variable: --spx-masonry-gap

Gap between images.

image-size

Type: string

WordPress media size when using the helper function..

images

Type: string <?php spx\Get::gallery($fieldName, $type) ?>

Gets images from an ACF or Metabox field.

images-src

Type: stringChoices: 'acf', 'mb'

Gets images from an ACF or Metabox field.

Events

spxMasonryDidLoad

Fires after component has loaded.

Methods

recalc

Recalculates grid.

reload

Reload component.