Asymmetric layout
Deliberately unbalanced arrangement that still feels composed: weight on one side answered by space or scale on the other.
See it
What it is
An asymmetric layout puts unequal things on either side of the center and still feels settled. Balance comes from visual weight rather than mirroring: a big photo on the left can be answered by a small block of dense type plus a lot of empty space on the right. Think Swiss / International Typographic Style, Jan Tschichold's 'The New Typography', Bauhaus and De Stijl posters, or a magazine spread where the headline sits in the outer third.
Reach for it when a centered stack of sections has gone lifeless, or when you want motion and direction on a static page. Common moves: a 7/5 or 8/4 column split instead of 6/6, headline offset into one column while the body sits in another, a hero image bled off one edge only, an anchor element pinned to the outer margin.
Gotcha: asymmetric is not random. There is still a grid underneath, and the offsets are chosen and repeated, otherwise it reads as a bug. The other trap: everything collapses into one centered column on mobile, so the whole personality vanishes on phones unless you keep some of it (offset headings, uneven padding, a bled image).
Ask AI for it
Lay this section out asymmetrically on a 12-column grid. Split it 8/4 instead of 6/6: put the image bled to the left page edge in the wide column and the headline plus body copy in the narrow right column, starting lower than the image top so the two blocks don't align. Offset the headline one column left of the body text, leave a large empty region in the lower left as counterweight, and repeat the same offset direction in every following section so it reads as a system. Keep the underlying grid strict; only the placement is uneven. On mobile stack to one column but keep the headline indent and the full-bleed image.