Home icon
Data Visualisation Guide

Breaking the grid

3 minutes read

Graphic design

Because the grid creates a regular pattern (see The grid), with clean alignments and layout, any element that is not aligned to the grid of a publication, creates tension and dynamism. When breaking the grid is used well, it creates more interesting and engaging designs.

A design that splits the page midways in two, with the title running over the separation between both parts

The title is breaking the grid, and connects the left and right part of the design. Source: Andre Ribeiro

A page design in which the text in the two columns runs around a central illustration of a leaf

Wrapping the text in the 2 columns around a central object creates a dynamic design. Source: Ted LoCascio

The technique of breaking the grid can be used to draw attention to a data visualisation, or to specific data points in a visualisation. It is a very efficient technique to draw attention to outliers (data points with extreme values) in data sets.

A spike map of covid-19 deaths in the United States, on the front page of the New York Times. The New York spike breaks out of the module of the map, and even spills over the heading. Source: nytimes.com

A series of bar charts, of which the highest value in one chart 'spills over' to the chart above

Source: davidrumsey.com

The Financial Times used this technique to show that some values were literally “off the charts”:

A series of area charts titled 'Omicron is sending cases soaring to record highs across the world'. The highest values on the charts, for Australia and Denmark, spill over over the title and even of the edge of the image

Source: twitter.com/jburnmurdoch/status/1478339853930618885

The same technique applied in a chart titled 'In many US states, ICY patient numbers are already appraoching record levels as Omicron takes off'

Source: twitter.com/jburnmurdoch/status/1478340575053197313

Related pages

Chart anatomy

Arrangement and reading direction

The grid

Visual hierarchy: sizing

Visual hierarchy: colour

Combining with other media: layout

Graphic design