Semi-flexible layout grid

Orde Saunders' avatarPublished: by Orde Saunders

One of the foundations of responsive design is the use of a flexible, grid-based layout. When included as a constituent part of a coherent design system featuring well chosen break points this is a robust method of designing and building a fluid layout. As part of a less complex layout this method of constructing a flexible grid can break down as it is scaled to its extremes.

Taking the example of a 12 column 960px grid as our starting point, this gives us 12 columns of 96px each separated by a 12px gutter. This provides a reasonable layout and allows us to set containers and text within this structure.

Full width layout grid

When built as a flexible grid this layout will scale evenly as the available width decreases. If we take the case where we have half the available width, our columns and gutters are similarly half their initial width.

Flexible grid scaled to 480px

The issue here is that, whilst the gutters have decreased in size, the content - and specifically the size of the text - has not. This leads to a situation where the content areas do not have sufficient spacing. As part of a more complex design system we could add breakpoints as needed to change the grid layout before these situations occur.

If we do not want to change our layout system we can prevent this issue (and the reverse where a narrow flexible grid is expanded leading to gutters that are too wide) by using a semi-fluid grid. We start from the same 12 column, 960px, grid as before but this time we fix the width of the gutters and scale down the width of the columns.

Semi-flexible grid scaled to 480px

As this has preserved the absolute width of gutters between the content areas it maintains a reasonable separation regardless of the available width.

Whilst this semi-flexible grid is not necessarily suitable for more complicated layouts it can prove useful in situations were a fully flexible grid is stretched beyond its limits by a simple layout.