Extra small column (320px to 511px)
Use for small screens like example mobile vertical.
Construction
- 4 columns flexed
- 16px gutters
- 20px fixed margins
- Auto container width
A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across all products.
SGDS have six main grid presets to consolidate margin and gutter adjustments across breakpoints.
Use for small screens like example mobile vertical.
Construction
Use for medium screens like example mobile horizontal.
Construction
Use for medium screens like example tablet vertical or small notebook.
Construction
Use for large screens like tablet landscape layouts or notebooks.
Construction
Use for extra large screens like desktop layouts.
Construction
Use for extra large screens like wide-screen monitors.
Construction
A responsive grid with a sticky sidebar is a layout where the main content uses a flexible grid system, while the sidebar remains fixed within the viewport when scrolling.
On mobile devices, the sidebar is hidden or repositioned to prioritise content visibility and improve usability.
Use for medium screens like tablet portrait layouts.
Construction
Use for large screens like tablet landscape layouts or notebooks.
Construction
Use for extra large screens like desktop or wide-screen monitor layouts.
Construction
Use for extra large screens like desktop or wide-screen monitor layouts.
Construction
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.