Create layouts with content rails

Establish one shared edge

Align navigation, hero copy and lower sections to the same container. A full-bleed image can escape the container while its caption returns to the shared rail. This gives an expressive page a coherent structure without requiring every section to look identical.

Let the grid adapt

Define a minimum useful card width and let columns form around it. Use minmax(0, 1fr) for tracks containing long text. Keep gaps related to a small spacing scale. Do not set a fixed card height until you have tested the longest supported content.

.container { width: min(100% - 2rem, 80rem); margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.card { min-width: 0; overflow-wrap: anywhere; }

Preserve intent across breakpoints

At narrow widths, order content by reading priority. A two-column sales section often becomes copy followed by imagery. Decorative elements may disappear, but evidence and primary actions should remain. Choose the breakpoint where the content stops fitting rather than relying on a device label.

Test uncomfortable cases

Try a 320px viewport, a long URL, doubled paragraph length and browser zoom. Inspect horizontal overflow at the page level. Fix the element causing it instead of concealing the problem with overflow-x:hidden on the body, which can cut off controls and focus outlines.