Page History
(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.
...
| Token | Description |
|---|---|
| displayName | Display name in the structure panel |
| elements | Components rendered inside the grid container |
| gridLayout | Configuration object for CSS grid properties |
| gridTemplateColumns | Defines column layout using CSS grid syntax |
| gridTemplateRows | Defines row layout using CSS grid syntax |
| gridGap | Sets spacing between grid items |
| fullHeight | Expands grid to fill parent height |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered on initialization |
| ON_DESTROY (Events) | Event triggered on removal |
| dataTestId | Testing hook ID for automated testing |
| visibilityPolicySetId | Controls visibility based on policy sets |
| displayConditions | Conditions for showing the component |
...
- 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
Guidelines
Usage
- Use the Grid Container to arrange child components into rows/columns by defining tracks in
gridTemplateColumns/gridTemplateRowsand rendering children viaelements. - Prefer flexible layouts that adapt to content using fractional tracks (e.g.,
1fr 1fr) andautoingridTemplateColumns/gridTemplateRows. - When the layout must occupy the available vertical space (e.g., dashboards), enable
fullHeight: true. - Label complex screens clearly with
displayNameso the container is recognizable in the structure panel.
...
