Grid Systems

The Grid System

In graphic design, a grid is a structure of intersecting lines that serve to guide the layout of content. This framework is used to organize content in a rational, easy to process manner through the layout.

Not only do grids serve as a guide for positioning elements within a layout, they also help with responsive design (web pages must render well on a variety of devices, browser window sizes, and screen sizes). In short, grids assist designers in creating a unified structure. They speed up design and make it easier to align future elements against existing ones.

The Rule of Thirds

A common application of grids is “the rule of thirds.” This rule — often applied in photography — utilizes an invisible grid of two horizontal and two vertical lines. The important elements in the image should be placed along those lines or at the points at which those lines meet.

For instance, on the grid below the intersection points noted in red. In the photograph below the important element — the pineapple — is placed where the left two intersection points would be. To most, this layout is more interesting and appealing to the eye than a layout in which the pineapple is centered.

Phi (Golden Ratio 1.61803399)

The Golden ratio is a special number found by dividing a line into two parts so that the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

The Golden Ratio determines the most pleasing set of proportions for an object and can be simplified by the ‘rules of thirds’. When the Golden Ratio is combined with a grid, rules for size, position and proportion can help a layout feel coherent and aesthetically appealing.

You can apply Phi to your design by taking the length or width of your page and dividing it by Phi.

The image below shows a horizontal and vertical split using this dimension.

Applying the Rule of Thirds & the Golden Ratio.

12 Column Grids

Common Breakpoints for responsive designs

Setting up a spacing system with units of 8 pixels

Set up a spacing system to create a consistent grid system.

Start by defining a base number for your grid.

Material Design principles use divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).

You can use other base number like 5: 5  / 10 / 15 / 20 etc..

Creating Grids in Sketch using 8 px Units

Select Artboard

View menu > canvas > show rulers (if, not already showing)

View (icon top right) > show layout (lets you see grid on artboard)

View (icon top right) > layout settings (lets you define the settings

Columns

  • Total width = width of Grid.
  • Off set = if the width of the grid is less than the full width you divide the excess by two to center the grid – so…. Artboard width – Total Grid width / 2 = offset
  • Number of columns (Desktop = 12, Tablet 9” 12, Mobile 6)

Rows

  • Gutter height set as 4 (smallest division when using 8px unit base)
  • Row height set as 1

Desktop HD w1440 with 1248 Grid

Tablet 9” w768 with 720 Grid

iPhone 7 w375 with 360 Grid

Grid Further Reading

Grid Resources