Skip to main navigationSkip to main content
Return to Sky UI homepage

Grids - Usage

View on FigmaView on GitHub

Basic Guidelines

Grids are used in Figma to help to organise content in a consistent, structured way. Grids come in different sizes that correspond to the Breakpoints in React.

  • Breakpoints are a defined width at which the layout adjusts to suit the screen size and orientation.
  • Responsive layouts are based on 4-column, 8-column, and 12-column grids.
  • The screen size determines the number of columns, as well as the width of margins and gutters.
  • Margin and gutters have a fixed with, whereas the columns shrink or expand to adjust for changes in the screen size.

Alignment

12-column grids

Content is recommended to only be placed in the inner eight columns of the grid. Exceptions are full width imagery and videos, and components specifically designed to be full width (like Masthead for example).

Min. screen width

We use 320px as the default minimum size, as recommended in the AA success criterion on reflow, provided by the Web Accessibility Initiative (WAI). A width of 320px generally corresponds to a browser window set to a width of 1280px, zoomed to 400%.

Max. content width

Page content has a maximum width of 1200px (that’s 1248px without the 24px margins on each side). Only Masthead and Footer can exceed this width to stretch up to 1600px.

The examples are downscaled proportionally to fit into this documentation.