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 |
...
- 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.
Sizing & Layout
- Define the column system explicitly with
gridTemplateColumns; keep track patterns consistent within a grid to avoid visual drift. - Control spacing between cells at the grid level using
gridGaprather than ad-hoc spacing in children to maintain a uniform rhythm. - Mix fixed (
px) and flexible (fr,auto) row heights ingridTemplateRows—e.g., headers/footers asautoor fixed and the body as1fr. - 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.
Visibility & Authorization
- Restrict access to sensitive layouts using
visibilityPolicySetIdso unauthorized users never see the container.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
Use gridTemplateColumns to define a consistent track system (e.g., 1fr 1fr 1fr). | Mix arbitrary widths across items without defining tracks, causing misalignment. | gridTemplateColumns |
Set gridGap once to establish uniform spacing rhythm. | Depend on inconsistent child spacing to fake gutters. | gridGap |
Combine auto/fixed rows for headers/footers with a flexible middle (1fr). | Force all rows to fixed heights, causing clipping or overflow. | gridTemplateRows |
Enable fullHeight when the layout must fill the viewport/panel. | Leave vertical space unused when full-height composition is required. | fullHeight |
Initialize track strings during ON_INIT to keep the layout stable. | Recompute tracks repeatedly during interaction, causing jumps. | ON_INIT, gridTemplateColumns, gridTemplateRows |
| Hide the grid when its data/prereqs are absent. | Show an empty grid that implies missing content without context. | displayConditions |
| Restrict visibility by role/policy. | Show sensitive layout regions to everyone and rely on content to block use. | visibilityPolicySetId |
| Expose a stable test hook. | Select the grid by brittle DOM paths or nth-child selectors. | dataTestId |
Accessibility
...
- Establish a deterministic structure and reading order by defining stable tracks in
gridTemplateColumns/gridTemplateRowsand a fixed child order viaelements, set duringON_INIT. - Maintain predictable spatial relationships with a single grid spacing value using
gridGap. - Avoid exposing confusing empty structures by hiding non-applicable layouts through
displayConditions. - Prevent disclosure of restricted content structures by applying
visibilityPolicySetId. - Prefer flexible tracks (
fr,auto) ingridTemplateColumns/gridTemplateRowsso content reflows instead of clipping. - Use
fullHeightwhen the grid should occupy the available vertical space to avoid awkward internal scroll cutoffs and preserve reading order.
