Most models scaffold a landing page as an endless tower of <div class="flex flex-col"> wrappers. It works but it's impossible to maintain and the vertical rhythm is always slightly off between sections.
I've been trying to steer output toward a named grid with explicit track sizing and container queries, so each section is a self-contained layout module rather than nested flex soup. The trick that finally worked was giving it a fixed vocabulary of section archetypes and telling it to reuse them.
No answers needed necessarily, just sharing the constraint set I landed on. If anyone has a cleaner way to enforce consistent vertical spacing across sections I'm all ears.
Generate a landing page as semantic HTML + a single modern CSS file (no framework, no utility classes). Content sections in order: {SECTION_LIST}.
LAYOUT SYSTEM:
- Page uses one CSS grid with named lines: [full-start] minmax(1rem,1fr) [content-start] min(70rem, 100% - 2rem) [content-end] minmax(1rem,1fr) [full-end]. Content sits in content-start/content-end; full-bleed sections span full-start/full-end.
- Do NOT nest flex wrappers more than 2 deep. If you reach for a third, use grid.
- Each section is a layout module using container queries (@container), not viewport media queries, so it is reusable at any width.
VERTICAL RHYTHM: define --space scale (0.5/1/2/3/5rem via a 1.5 ratio). Section vertical padding uses only --space tokens. All sibling spacing uses one consistent token; no ad-hoc margins.
SECTION ARCHETYPES (reuse these, don't invent per-section): hero-split, feature-alt (image alternates side per row), logo-strip, cta-band. Comment which archetype each section uses.
Output: the CSS custom-property token block first, then the HTML, then section CSS grouped by archetype.