Magazine Layout
Arranges multiple stories in a deliberate editorial hierarchy — one dominant lead story, secondary features, and tertiary briefs — so readers instantly know what matters most.
AI Prompt
Build an editorial magazine homepage in Next.js with Tailwind CSS. Use CSS Grid with named areas. Layout structure: (1) Full-width masthead: publication name in a bold serif font, publication date, and a horizontal category nav (World, Tech, Culture, Science, Opinion) with a bottom-border active state. (2) Main grid with `grid-template-areas`: `"lead lead secondary" "lead lead tertiary" "brief1 brief2 brief3"` on desktop. Lead story: large `aspect-[16/9]` image, category label in `text-red-600 font-bold uppercase text-xs`, H2 in a serif font `text-2xl md:text-3xl font-black`, 2-line summary, byline. Secondary story: `aspect-[4/3]` image + H3 + summary. Tertiary: H3 only + category badge. Brief items: no image, just category tag + headline + author. (3) Below the grid: a horizontal "More Stories" strip — `overflow-x-auto` row of small cards with `min-width-56` each. (4) Right sidebar (if using a 3-column outer grid): "Most Read" numbered list, newsletter CTA, and a "Subscribe" ad unit. Use `gap-8` between all grid cells. Add `border-b-4 border-red-600` to the masthead for editorial drama.