Layout

On this page

 

The NSW Design System is built on a 12 column responsive grid which adapts to the user’s viewport to provide the optimal layout. 

Breakpoints

Breakpoint

Dimensions

Columns

Margins

Gutters (Split)

xs (Extra Small)

0-575px

1

8px

16px (8px)

sm (Small)

576-767px

Up to 2

8px

16px (8px)

md (Medium)

768-991px

Up to 3

8px

16px (8px)

lg (Large)

992-1199px

Up to 4

32px

16px (8px)

xl (Extra Large)

1200px+

Up to 4

32px

16px (8px)

Grid

Grid example

Example of applied grid

Applied grid example, showing margins, columns and gutters.

 

Last updated