Rule of thirds
Split a page into a 3x3 grid and place the headline or key image on a line or intersection instead of parking everything in the middle.
See it
What it is
The rule of thirds divides a page, section, or poster into a 3x3 grid, then puts the focal point on one of the four intersections or along a dividing line. John Thomas Smith coined the phrase in his 1797 book *Remarks on Rural Scenery*, long before the Grid toggle in the iPhone camera settings put the same 3x3 overlay in everyone's pocket.
Reach for it when a hero, poster, slide, or card feels stiff because everything sits in the middle. Put the main block near one vertical third, align an important edge with a horizontal third, and leave the opposite area open. That imbalance gives the composition direction while the grid keeps it controlled.
Gotcha: the intersections are guides, not snapping points. Forcing every heading, image, and button onto them creates a new kind of rigidity, and a placement that works on desktop may collapse badly on a phone. Recompose at smaller breakpoints instead of preserving the same thirds at any cost.
Ask AI for it
Build this hero around the rule of thirds using CSS Grid. Give the section grid-template-columns: repeat(3, minmax(0, 1fr)) and grid-template-rows: repeat(3, minmax(0, 1fr)) with min-height: 80vh. Place the background image at grid-area: 1 / 1 / 4 / 4 with width: 100%, height: 100%, object-fit: cover, and object-position: 78% 30% so its subject sits near the upper-right intersection. Place the headline block at grid-area: 2 / 1 / 4 / 3 so its top edge lands on the upper horizontal third and its right edge stops on the second vertical third line, and leave the top-right cell empty. Below 768px, drop to a single column with the image above the headline instead of squeezing the thirds grid onto a phone.