Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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.

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 gridGap rather than ad-hoc spacing in children to maintain a uniform rhythm.
  • Mix fixed (px) and flexible (fr, auto) row heights in gridTemplateRows—e.g., headers/footers as auto or fixed and the body as 1fr.
  • 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 visibilityPolicySetId so unauthorized users never see the container.

Dos & Don’ts

DoDon’tArticle 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.

Accessibility

...

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 / gridTemplateRows and a fixed child order via elements, set during ON_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) in gridTemplateColumns / gridTemplateRows so content reflows instead of clipping.
  • Use fullHeight when the grid should occupy the available vertical space to avoid awkward internal scroll cutoffs and preserve reading order.