Page History
...
| 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 |
...
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=1044-137823&t=ftfrOGkPzlG2GaTo-1Live style guide: tba
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.
...
