Masonry: Reference
Reference for Masonry in Web Framework References. Key properties: ID, Expression, Unique Key, Preserve Order.
Arrange elements in a grid based on the available vertical space. Stop facing problems with different-sized items on your website! App Connect Masonry will place every item in a grid based on the available vertical space.
Inspector Property Groups
Masonry Repeater Properties
| Property | Type | Details |
|---|---|---|
| ID | text | Attribute: id |
| Expression | text | Attribute: dmx-bind:repeat Supports dynamic option sources. |
| Unique Key | text | Choose the unique key field to identify the Masonry repeater's record. Only needed when you want to use animations or need to identify repeater's rows in DOM. Do not use if not needed as it will slow down the repeater. Attribute: key Supports dynamic option sources. |
| Preserve Order | boolean | Default order the items from left to right into the columns and optimize the layout by equalizing the height of each column, turn this off to preserve the exact order Attribute: preserve-order |
| Animated | boolean | Attribute: animated |
| Duration | text | The duration of the animation in milliseconds Attribute: animation-duration |
Columns
| Property | Type | Details |
|---|---|---|
| Default | text | The number of columns to create Attribute: columns |
| Small | text | The number of columns for small devices with width >= 480px Attribute: columns-sm |
| Medium | text | The number of columns for medium devices with width >= 768px Attribute: columns-md |
| Large | text | The number of columns for large devices with width >= 992px Attribute: columns-lg |
| XLarge | text | The number of columns for extra large devices with width >= 1200px Attribute: columns-xl |
| XXLarge | text | The number of columns for extra extra large devices with width >= 1400px Attribute: columns-xxl |
Gutter
| Property | Type | Details |
|---|---|---|
| Default | text | The number of gutter to create Attribute: gutter |
| Small | text | The number of gutter for small devices with width >= 480px Attribute: gutter-sm |
| Medium | text | The number of gutter for medium devices with width >= 768px Attribute: gutter-md |
| Large | text | The number of gutter for large devices with width >= 992px Attribute: gutter-lg |
| XLarge | text | The number of gutter for extra large devices with width >= 1200px Attribute: gutter-xl |
| XXLarge | text | The number of gutter for extra extra large devices with width >= 1400px Attribute: gutter-xxl |
Breakpoints
| Property | Type | Details |
|---|---|---|
| Small | text | The width of the small devices breakpoint in pixels Attribute: dmx-bind:breakpoints Supports dynamic option sources. |
| Medium | text | The width of the medium devices breakpoint in pixels Attribute: dmx-bind:breakpoints Supports dynamic option sources. |
| Large | text | The width of the large devices breakpoint in pixels Attribute: dmx-bind:breakpoints Supports dynamic option sources. |
| XLarge | text | The width of the extra large devices breakpoint in pixels Attribute: dmx-bind:breakpoints Supports dynamic option sources. |
| XXLarge | text | The width of the extra extra large devices breakpoint in pixels Attribute: dmx-bind:breakpoints Supports dynamic option sources. |