Two-column layout
Two regions sitting side by side, either evenly split or sized differently to match what each side needs to do.
See it
What it is
A two-column layout places two regions beside each other. They can be equal halves, a wide and narrow pair, or two independent panels. The useful part is the relationship: explanation beside evidence, choices beside a preview, or primary content beside supporting material.
Reach for it when seeing both regions at once makes the page easier to understand. Product introductions often pair copy with a screenshot; comparison and workspace screens often give each side its own job.
Gotcha: two columns are not a promise to stay side by side. Decide which region comes first in the HTML, stack them deliberately on narrow screens, and avoid squeezing either below its useful width. A casual 50/50 split often wastes space when the two regions carry different amounts of information.
Ask AI for it
Build a two-column layout with CSS Grid using grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr) and a 2rem gap. Put the primary content first in the HTML, align both regions to the top, and switch to grid-template-columns: 1fr below 760px. Let either column wrap internally without setting fixed heights.