Grid system

The grid system provides a set of precompiled, table-based layout components for creating responsive email designs. Each layout is a reusable snippet that uses semantic fractions (e.g. 1/2, 2/3) or fixed widths (e.g. 300px), ensuring reliable rendering across all major email clients.

Layouts are available in:

• single-column
• two-column
• multi-column formats.

Each layout is optimised with appropriate padding and spacing to maintain a consistent total width of 640px – the standard for NSW Government email templates. This approach ensures visual balance, alignment and a responsive user experience without relying on unsupported CSS features like grid or flexbox.

When to use

To use the grid system:

• Select and copy the layout snippet that fits your design needs
• Use fixed pixel values for column widths
• Columns automatically stack on mobile devices for better readability
• All spacing follows the 8-point scale (multiples of 4px) to maintain clean vertical rhythm and accessibility.