---
name: Rule of thirds
slug: rule-of-thirds
category: layout
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: Dividing a frame into nine equal cells with two lines each way and
  placing the important elements on the lines or their intersections.
aliases:
  - name: thirds grid
    source: community
  - name: compositional thirds
    source: photography
tags:
  - grids
  - perception
relations:
  contrastWith:
    - focal-point
    - golden-ratio
  variantOf: []
  partOf: []
  seeAlso: []
implementations: []
sources: []
demo: inline
exhibit: false
useWhen: placing a focal point off centre on purpose
---

Draw two evenly spaced lines across a frame and two down it, and you have nine cells and four
intersections. The rule of thirds says to put the things that matter on those lines: the
horizon on one of the horizontal ones, the subject on one of the four intersections, a
building's edge along a vertical. It comes from painting and photography, it is the first
composition rule anybody is taught, and it survives into interface work for the same reason it
survived in photography, which is that it is a fast, memorable way to avoid the dead centre.

What it is really a rule against is symmetry by accident. A subject placed exactly in the
middle divides the frame into equal halves in both directions, which gives the eye nowhere to
travel and leaves no room for the thing the subject is looking at or moving toward. Off centre
placement creates that room, and the thirds are simply an easy off centre that anyone can find
without measuring. The related claim, that the intersections are where the eye naturally
falls, has never held up well under eye tracking studies. The rule is useful as a default, not
as a law of perception, and plenty of good compositions are dead centre on purpose.

Its more careful cousin is the [golden ratio](/golden-ratio), which places the same lines at
roughly 38 and 62 percent instead of 33 and 67. The two are close enough that at normal sizes
the difference is a few pixels, which is a good argument for using whichever one you can apply
without thinking. In an interface the rule of thirds gets used for the things that are pictures
first: a hero image and its crop, a card's cover art, a video poster frame, where the focal
point should be placed. That is different work from the grids that carry a layout, the
[layout grid](/layout-grid) and the [modular grid](/modular-grid), which divide a page into
columns and fields for content to occupy rather than marking where one focal point should sit.

The practical version in product work is not the overlay, it is the crop. When an image is
going to be cropped to several aspect ratios, the safest thing is to know where the focal point
is and keep it near a third, since that survives a square crop, a wide crop and a tall one,
while a dead centre subject drifts to the edge in exactly one of them. Naming the focal point
and stating which third it belongs on is what turns a compositional rule into something an
automatic crop, a designer and a photographer can all follow. This is close to what
[visual hierarchy](/visual-hierarchy) does with ranking rather than placement: thirds decide
where the most important thing goes, hierarchy decides what that thing is.