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

Grid Container

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=1044-137823&t=ftfrOGkPzlG2GaTo-1

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.

...

• 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.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=1044-137823&t=ftfrOGkPzlG2GaTo-1
• Live style guide: tba

Guidelines

Usage

• Use the Grid Container to arrange child components into rows/columns by defining tracks in gridTemplateColumns / gridTemplateRows and rendering children via elements.
• Prefer flexible layouts that adapt to content using fractional tracks (e.g., 1fr 1fr) and auto in gridTemplateColumns / gridTemplateRows.
• When the layout must occupy the available vertical space (e.g., dashboards), enable fullHeight: true.
• Label complex screens clearly with displayName so the container is recognizable in the structure panel.

...