Extra small column (320px to 511px)
Use for small screens like example mobile vertical.
- Columns
- 4 columns flexed
- Gutters
- 16px
- Margins
- 20px fixed
- Container width
- Auto
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.
Use for medium screens like example mobile horizontal.
Use for medium screens like example tablet vertical or small notebook.
Use for large screens like tablet landscape layouts or notebooks.
Use for extra large screens like desktop layouts.
Use for extra large screens like wide-screen monitors.
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 example tablet vertical.
Use for large screens like example tablet horizontal or notebook.
Use for extra large screens like example desktop or wide screen monitor.
Use for extra large screens like example desktop or wide screen monitor.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.