Design system

Grid

Arrange a number of components into a responsive grid pattern.

Code playground

<GoAGrid minChildWidth="320px">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
</GoAGrid>

Properties

gapnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Gap between child items
Defaults to m.

minChildWidth

string

Minimum width of the child elements

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Design

To use grid in design, set Figma's built-in auto layout to wrap. This will create a responsive grid pattern that can respond to different screen sizes, similar to the Grid component in code.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Playground

Properties