Rule of thirds grid for any photo or layout
Drop in a photo, a banner or a screenshot. See the thirds or the phi grid over it, mark your subject, and get the crop that puts it on a power point.
- Free, no signup
- Nothing is uploaded
- Thirds and phi grid
PNG, JPG or WebP. Or paste with Ctrl+V. The sample photo below is loaded until you add your own.
Your image on the grid
Tap the image where your subject is, or set it with the two sliders. Turn on the crop to see where the subject would land on a power point.
Rule of thirds grid on the sample photo. The pebble stack sits at 35% across and 65% down, on the lower left power point.
What is the rule of thirds?
The rule of thirds divides a frame with two lines across and two lines down, into nine equal parts. Instead of placing the subject in the centre, you place it on one of the lines or on one of the four points where they cross. A centred subject resolves all the tension in a frame; an off-centre one leaves space for the eye to move, and that reads as a decision.
It is the grid in your phone's camera app, and it works the same way on a hero image or a banner: put the face, the product or the headline's anchor on a power point, and let the empty third carry the rest. The rule of thirds in design shows it on real examples, including when to break it.
Rule of thirds or phi grid?
The phi grid is the golden ratio version. Its lines sit at 38.2% and 61.8% of the frame instead of a third and two thirds, so they are pulled in towards the centre by about 5% of the frame. Switch between the two above and watch how little the power points move. That small difference is why the simpler thirds grid is the one most people use; proportion in design covers where the golden ratio does earn its place, and the golden ratio calculator works out its numbers for a layout.
How is the crop chosen?
You mark where the subject is. For each of the four power points, the tool works out the largest crop of the shape you picked that puts the subject exactly on that point and still fits inside the image. It keeps the one that throws away the least. A subject right against the edge of the frame cannot be moved onto a power point by cropping, and the tool says so rather than suggesting a sliver.
Questions
What is the rule of thirds?
Two lines across and two lines down divide the frame into nine equal parts. The rule puts the subject on one of those lines, or on one of the four points where they cross, rather than in the centre. Off-centre placement leaves space for the eye to travel, which reads as more deliberate than a subject parked in the middle.
What is the difference between the rule of thirds and the phi grid?
The phi grid places its lines at 38.2% and 61.8% of the frame, the golden ratio, instead of at 33.3% and 66.7%. Its lines sit closer to the centre, about 5% of the frame, so a phi composition is slightly tighter and calmer. The difference is small enough that the thirds grid is the one most photographers and designers use.
What are power points?
The four points where the grid lines cross. Photographers call them power points, and putting the key detail of the subject on one, such as an eye in a portrait, is the most common way to apply the rule. The tool names the nearest one to your subject and how far away it is.
Does the rule of thirds work for web and UI design?
For images inside a layout, yes: a hero photo, a product shot, or where a headline sits against a picture. The page itself still runs on a column grid. Use the thirds grid for the composition inside an image or a banner, not as a replacement for your layout grid.
How does the suggested crop work?
For each of the four power points, it finds the largest crop of the shape you chose that puts your marked subject exactly on that point without running off the edge of the image. Then it keeps the crop that throws away the least of the picture.
Is my image uploaded anywhere?
No. The image is drawn in your browser and never leaves your device. The download is made on your device too.
Composition is one part of the picture. To check whether the text on a design can be read, try the contrast checker, and for hierarchy and layout, the AI design critique.