Symmetrical layout
A composition balanced around a central axis, with both sides matching exactly or carrying similar visual weight.
See it
What it is
A symmetrical layout balances visual weight around a central axis. The two sides may mirror each other exactly, or simply carry elements with similar size, contrast, and spacing. The result tends to feel stable, formal, and easy to scan.
Reach for it when order and calm matter: a centered landing page, a ceremonial invitation, a comparison with equal choices, or a brand composition built around one central object. The Google search homepage is the plainest web version: one centered mark, one centered field, and nothing competing on either side. A visible axis makes the relationship legible immediately.
Gotcha: mathematical equality is not always optical balance. A dark photo can outweigh a larger block of pale text, and letters have uneven shapes. Adjust for perceived weight, and break the symmetry on purpose when one action or message really is more important.
Ask AI for it
Build a symmetrical layout around a visible center axis with CSS Grid using grid-template-columns: 1fr auto 1fr. Mirror the outer groups, match their spacing and visual weight, place the primary object in the center track, and use justify-self: end and justify-self: start on the opposing sides. Below 640px, stack to one column in DOM order with the center object first, and center each group with justify-items: center.