Grids

The standard FT grid system is designed to be flexible, responsive, and adaptable. It caters to a wide range of devices and screen sizes, ensuring consistency and harmony across all digital products.

This page covers the design and behaviour of grids. For technical details, please see the technical documentation in Storybook. Note that the previous version of Origami (o2) uses a different grid system, for this see o-grid. We recommend following the below design guidelines for any new projects.

Grid Anatomy

1. Columns: The coloured blocks define the content area. Align field elements to a specific number of columns within this space.
2. Gutters: the space between the columns.
3. Margins: also known as outside gutters, the amount of white space outside of your content width.

Grid Properties

Dimensions

Our grid adapts to the following breakpoints to accommodate various screen sizes:

Breakpoint	Range (px)	Columns	Gutter	Margin	Usage
XS	320-489	4	16px	16px	Portrait - mobile
S	490-739	4	16px	16px	Portrait - large mobile, small tablet Landscape - mobile
M	740-1023	8	16px	24px	Portrait - tablet Landscape - large mobile, small tablet
L	1024-1439	12	24px	24px	Landscape - large tablet, desktop
XL	1440+	12	24px	24px – auto	desktop

Columns

Column widths are fluid and change with the size of the grid.

Baseline

Following industry-standard, we use a 4px baseline which the grid, spacing and typography is based on.

Grid Behaviour

Contained Width

Our grid is fluid, it uses 100% of the screen’s width until the max width of 1312px (XL breakpoint) is reached. After this, the margins grow to fill the screen. This allows for maximum use of screen real estate in complex screens and readability of page content in large and high-definition screens. Exceptions can be made for full-bleed banners, headers and graphics, to bleed out of the grid columns.

Column Spanning

Layout regions can span any number of columns, separated by the grid gutter. You have the flexibility to set the number to reflect the responsive nature of your design.

Layout Responsiveness

Responsive layout design adapts content layout to various screen types using a fluid layout. This ensures that features built once will display evenly across all screen sizes.

Column Offset

Page content does not always need to span across 12 columns; it can occupy a smaller region within the page.

Usage Guidelines

Do not use fractional column spans

Use the gutter width to help determine the space between layout regions. At any breakpoint, only use a number of cards that are exact multiples of the grid column size.

If layout doesn’t divide evenly (e.g. 3 teasers in a 8-column grid), opt for:

• 2 layout (2 columns each), or 4-layout (2 columns each).
• Apply horizontal scroll instead of breaking column alignment.

✅ Do

❌ Don't

Align irregular or fixed sized content using invisible regions

Sometimes content cannot align to the grid. For example, we do not always control the dimensions of an ad banner. In this scenario, imagine an invisible element around the content which does align to the grid. Ensure no other content overlaps this grid area.

✅ Do

Do not leave elements in the gutters

Your elements should sit within the columns and not bleed into the gutters. You cannot leave elements in the gutters; that causes inconsistency and defeats the purpose of the grid.

✅ Do

❌ Don't

Accessibility Considerations

Maintain readability range for article body

Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–80 characters, including spaces.

✅ Do

❌ Don't

Chrome Extension for Grid Overlay

To aid in implementing and visualising the Origami grid system in your projects, we offer a Chrome extension that provides a customisable grid overlay for your web pages. This helps you understand how your website aligns to Origami’s grid system.

Key features:

• Enable/disable grid overlay with a single click
• Customize column, gutter, and margin colors
• Adjust grid opacity
• Quick reset to default settings

Install Origami Chrome Extension

Further reading/inspiration:

Responsive grids and how to actually use them