What is the Rule of Thirds?

The rule of thirds divides any frame into 9 equal parts with 2 evenly spaced horizontal lines and 2 evenly spaced vertical lines: a 3×3 grid. Instead of centering everything, you place the most important elements along those lines or at the points where they cross.

On a web page, the grid helps you decide where the logo, headline, and call to action belong, how much whitespace to leave between elements, and where one section should end and the next begin.

How the rule of thirds works

Picture the grid laid over your design. The 2 horizontal and 2 vertical lines are spaced evenly, so all 9 cells are the same size, and the 4 spots where the lines cross are often called power points. The grid doesn't mark spots where eyes are guaranteed to land. What it gives you is a set of repeatable anchors for building an off-center composition: the headline along the upper horizontal line, the call to action on an intersection, the focal point of a hero image on a power point.

Why the rule works

The rule exists to discourage centering. A centered subject makes a composition feel static, and a strong line across the middle appears to cut the picture in half. Off-center placement along the thirds lines tends to create more tension and interest than a centered composition, which is why the guideline has survived from painting to photography to film to the web.

Screens add a related piece of evidence, though it's narrower than it sounds. Nielsen Norman Group's eye-tracking studies, first published in 2006 and reconfirmed on desktop and mobile in 2017, found that people often scan text-heavy pages in an F shape: a horizontal sweep across the top, a shorter sweep below it, then a vertical scan down the left side. On sites in left-to-right languages, attention concentrates along the top and left of the content area (the pattern flips for right-to-left languages like Arabic), which is one reason so many websites keep the logo and site title in the top-left corner. That research describes how people read content, not proof that eyes settle on thirds lines. Scanning varies with the content, the layout, and the reading direction, so treat the grid as a starting point and validate important placements with usability testing.

Where the rule comes from

The rule of thirds is a general rule of thumb for composing visual work of all kinds: designs, films, paintings, and photographs. John Thomas Smith first wrote the name down in 1797 in his book Remarks on Rural Scenery, recommending proportions of about two-thirds to one-third as more pleasing than a formal half. Photographers made the 3×3 grid famous, and web designers borrowed it because a browser window is just another frame. So yes, it's the same rule you learned in photography class.

Rule of thirds vs. the golden ratio

The golden ratio is another classic guide to asymmetric composition, and the two are easy to mix up:

• Both help you create an asymmetric composition instead of centering every focal element.
• The rule of thirds splits a frame at one-third and two-thirds, a simple 1:2 division you can eyeball.
• The golden ratio divides a length at about 1:1.618, a proportion you have to calculate.
• For layout work, thirds is the simpler approximation: a standard 3×3 overlay draws it for you.

When to break the rule

Use the thirds grid when several elements compete for attention and you need to set direction and hierarchy. Use a centered, symmetric composition when you want a single focus: a landing page hero with one headline and one button is the standard example. Centering tells visitors there's exactly one thing to do, and sometimes that's precisely the message you want. The rule of thirds is a rule of thumb, not a law; visual balance is the goal, and the grid is just one way to get there.

How to apply it to your website

Start with a 3×3 overlay. Figma's layout grids and the grid in Photoshop's crop tool will both draw one for you. Then work through the hero section of your page:

• Align the headline with one of the vertical lines rather than centering it. The line is a repeatable anchor for an off-center composition, not a guaranteed attention point.
• Place the call-to-action button on one of the lower intersections.
• Set the focal point of the hero image, like a face or a product, on a power point.

One caution: the grid assumes a fixed frame, and responsive layouts reflow as the screen narrows, so an element that sits on a thirds line on desktop can stack dead center on a phone. Check the alignment at every breakpoint, and test placements that matter, like the primary call to action, with real users before you ship. If the layout still fights you, step back and revisit the basics in our guide to the elements of web design.