(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Grid Container

Overview

• The Dynamic Grid Container is a layout component built on the CSS grid system.
• It organizes child components into rows and columns.
• It supports responsive and flexible layouts.
• It is suitable for dashboards, forms, and other structured interfaces.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Dashboard Layout" provides clear identification of the grid's purpose in the component hierarchy.
• elements – Contains all components to be rendered within the grid container. This array can include any dynamic components that will be positioned according to the defined grid layout.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component based on context data or expressions. For example, configuring it to display only when "userType === 'advanced'" ensures the grid appears only for advanced users, providing a conditional layout experience.

Styling

(Configured in Visual Properties)

• fullHeight – Controls whether the grid container should expand to fill its parent container's height. When set to true, the grid will occupy 100% of the available vertical space, which is useful for creating full-height layouts in panels or tabs.
• gridLayout – Defines the grid structure using CSS Grid properties. This configuration object contains:
• gridTemplateColumns – Specifies the column layout using CSS grid syntax. For example, "1fr 1fr 1fr" creates three equal-width columns, while "200px 1fr 2fr" creates a fixed width column followed by two proportional columns.
• gridTemplateRows – Specifies the row layout using CSS grid syntax. For example, "auto 1fr 100px" creates a row that sizes to content, a flexible middle row, and a fixed height bottom row.
• gridGap – Sets the spacing between grid items. For example, "8px" creates uniform spacing between all grid cells.

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the component is initialized. Can be used to perform setup operations like setting initial data or calculating dimensions.
• ON_DESTROY – Triggered when the component is removed from the DOM. Useful for cleanup operations or releasing resources.

Tests

(Configured in Testing Hooks)

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "main-dashboard-grid" allows test scripts to reliably locate this grid container during automated testing.

Authorization

(Configured in Authorization)

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the grid container to users with admin privileges, hiding it from other users without the required permissions.

Guidelines

• The foundation of the design system is a modified Bootstrap grid with 24 columns in dashboards and 12 columns in boardlets.
• The 24 Columns Grid applies only within the content area. The header and content area are treated as separate zones.
• The grid has no column space; spacing is solved using margins, ensuring consistent distances across layouts.
• Boardlet grids come in two types: for graphic content and for regular content, differing only slightly in padding.
• Gutters may be optional:
• Use a gutter if content requires stronger separation.
• Avoid gutters if content is closely related and should appear grouped.

Accessibility

[NO DATA AVAILABLE]