About
The Masonry layout is a dynamic grid where items are placed in optimal positions based on available vertical space. Unlike a standard grid that forces rows to a uniform height, Masonry allows items of varying lengths to sit closely together, creating a cascading effect. This is particularly effective for dashboards featuring content with different summary lengths or varying image aspect ratios.
Available settings in Layout preferences
The Masonry layout includes several specific configuration options in addition to the general layout settings:
Search box – Enable a dedicated search input to filter the masonry items.
Sorting – Allow users to change the sort order via a dropdown menu.
Styling options – Select a custom field from your data source to be applied as a CSS class to the masonry items. Note that you must create the CSS styles yourself, as Dash does not provide predefined styles for this field.
Available settings in Fields preferences
Selecting the Masonry layout provides a fixed-slot mapping system within the Fields preferences. This system allows you to assign specific data fields to predefined areas of the content card:
Background image – Choose a field to serve as the card's background image.
Image URL field – Define the image used as a link in each card.
Image overlay field – Text to be displayed directly over the background image with a solid background.
Subheading field – A smaller text area above the main heading.
Heading field – The primary title of the card.
Body fields 1 to 3 – Up to three distinct areas for more information.
Footer fields (Left/Right) – Specific slots at the bottom of the card.
Note: The specific fields available for selection are determined by the data source assigned to the block.