About
The Grid layout presents data in a visually appealing card-based format, offering extensive customization options. This layout is ideal for creating course catalogs, team directories, or resource galleries where visual elements like images are prioritized.
Administrators can control the density of the grid by specifying the number of columns and can map specific data fields to a structured card design including headers, subheadings, and multiple body sections.
Available settings in Layout preferences
The Grid layout includes several specific configuration options in addition to the general layout settings:
Search box – Enable a dedicated search input to filter the grid items.
Sorting – Allow users to change the sort order.
Columns – Define the number of columns to display per row.
Styling options
Select a custom field from your data source to be applied as a CSS class to the grid 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
Available settings in Fields preferences
Selecting the Grid 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.