PLAYBOOK · LAYOUT
Layout & Responsive
Restructure grids, density, and breakpoints with a single prompt.
PROMPT LIBRARY
40 prompts for layout & responsive
live preview
LayoutBeginner~50 credits
Make the layout less dense
Loosen a cramped section in one prompt.
Make this section less dense: increase the gap between items to 24px and the section's vertical padding to 96px, raise line-height on the body text slightly, and let the headline breathe. Don't change the content, copy, or order — only the spacing and rhythm.
live preview
LayoutBeginner~50 credits
Turn a row into a 2×2 grid
Restructure a flat row into a tidy grid.
Turn this row of four items into a 2×2 grid with doubled spacing and rounder image corners (16px). Keep the cards equal height, center the grid in the section, and make it collapse to a single column on phone.
live preview
LayoutIntermediate~50 credits
Feature one grid item
Break the grid rhythm to spotlight a tile.
Feature the first item in this grid by making it span two columns and two rows so it reads as the hero of the set. Keep the remaining items in their normal cells, preserve the gap, and make sure the featured tile drops back to full width on phone.
live preview
LayoutIntermediate~100 credits
Vertical sidebar nav
Re-flow horizontal nav into a left column.
Convert the top navigation into a left-aligned vertical sidebar: logo at the top, links stacked beneath with 8px gaps and an active state, and the CTA pinned at the bottom. Keep it sticky on scroll and switch back to a top bar on tablet and phone.
live preview
LayoutAdvanced~150 credits
Make the whole site responsive
Generate tablet and phone breakpoints sitewide.
Make every page responsive across the entire site. Create Tablet (810px) and Phone (390px) breakpoints, and for any component that needs a different layout — nav, cards, split sections — create the alternate variants. Audit each breakpoint for overflow and fix anything that clips.
live preview
LayoutAdvanced~100 credits
Audit and fix overflow
Catch elements escaping their parents.
Audit this page on tablet and phone for any element that overflows its parent, causes horizontal scroll, or misaligns. List what you find, then fix each by adjusting widths, wrapping, or padding — without changing the desktop layout.
live preview
LayoutBeginner~50 credits
Even out the columns
Balance a ragged grid.
Make these cards a clean, even, responsive grid that wraps from four columns to one as the screen narrows. Use a consistent 16px gap, equal heights, and a minimum column width so items never get uncomfortably narrow.
live preview
LayoutIntermediate~100 credits
Split-screen section
A balanced 50/50 layout.
Restructure this section into a split-screen: copy and a CTA on the left, a full-bleed image on the right, each taking half the width. Vertically center the text column, keep a clean seam between halves, and stack image-over-text on phone.
Qo.
live preview
LayoutBeginner~50 credits
Tighten the type scale
Fewer, more intentional sizes.
Audit the font sizes used on this page and reduce them to a consistent scale of no more than five sizes. Bind every text layer to the matching text style, fix any one-off sizes, and keep the visual hierarchy intact.
live preview
LayoutIntermediate~100 credits
Bento grid layout
Asymmetric tiled grouping.
Lay these features out as a bento grid: one large hero tile, two medium tiles, and a few small ones, all on a tight gap with concentric corner radii. Keep it balanced, give each tile a 1px border, and reflow it sensibly to one column on phone.
live preview
LayoutIntermediate~100 credits
Sticky sidebar + content
Persistent side column layout.
Convert this page to a sticky-sidebar layout: a 260px column on the left holding section links that highlight as you scroll, and the main content on the right. Keep the sidebar pinned within the viewport and hide it behind a toggle on phone.
live preview
LayoutAdvanced~150 credits
Align everything to a grid
Snap the whole page to one system.
Audit alignment across every section and snap them all to a single 1200px max-width with consistent 48px horizontal padding. Fix sections that are off-center or use one-off widths so every left and right edge lines up down the page.
Qo.
live preview
LayoutBeginner~50 credits
Add vertical rhythm
Consistent spacing between sections.
Give this page a consistent vertical rhythm: apply the same top and bottom padding to every section, add a thin divider between major sections, and make sure the spacing scales down proportionally on tablet and phone.
Rx.
live preview
LayoutIntermediate~100 credits
Balance hero text
Fix widows and rag.
Balance the wrapping of this hero headline and subhead so there are no single-word last lines and the rag looks intentional. Use balanced text wrapping, keep it within the existing styles, and re-check the balance at tablet and phone widths.
live preview
LayoutAdvanced~150 credits
Phone-first section redesign
Rework a section for small screens.
Redesign this section phone-first: a single column, larger 48px tap targets, comfortable 16px side padding, and a sticky bottom call-to-action bar. Then scale it up gracefully for tablet and desktop rather than cramming the desktop layout down.
live preview
LayoutIntermediate~100 credits
Masonry image wall
Staggered, gap-filling gallery.
Lay these images out as a masonry wall with varied heights that fills vertical gaps naturally as it wraps. Keep a consistent gap, round the corners, add a subtle zoom on hover, and drop to a single column on phone.
Be.
live preview
LayoutBeginner~50 credits
Center a reading column
Editorial measure for long text.
Constrain this article to a centered reading column about 68 characters wide with comfortable line-height and paragraph spacing. Let images and pull quotes break out slightly wider than the text for emphasis.
live preview
LayoutAdvanced~150 credits
Variants per breakpoint
Alternate component layouts.
Create Tablet and Phone variants for this card component so it switches from a horizontal media-left layout on desktop to a stacked layout on phone. Keep one shared set of controls and content so editing stays in one place.
live preview
LayoutIntermediate~100 credits
Responsive pricing table
Table on desktop, cards on phone.
Make this pricing table responsive: keep the comparison table on desktop, but transform it into stacked plan cards on phone so no horizontal scrolling is needed. Highlight the recommended plan in both layouts.
live preview
LayoutBeginner~50 credits
Equal-height cards
Stop the ragged bottoms.
Make every card in this row the same height regardless of content length, with the call-to-action button pinned to the bottom edge of each. Keep the gap consistent and let the cards wrap to a grid on smaller screens.
live preview
LayoutAdvanced~250 credits
Asymmetric Editorial Hero
Build an off-center hero with a dominant headline column
Restructure the hero into an asymmetric two-column stack frame using a 12-column logic: place the headline and CTA in a wide left column spanning roughly 7 parts and a supporting image in the right 5 parts, offset vertically so the image bleeds past the section edge. Bind column widths to layout variables so the ratio holds, then on the tablet breakpoint reflow to a single stacked column and reduce section padding. Keep baseline alignment between the headline and the image top edge, and respect prefers-reduced-motion on any entrance.
$ npx @framer/agent
✓ connected to canvas
audit my SEO
generating nodes
live preview
LayoutAdvanced~300 credits
Fluid Spacing Tokens
Replace fixed gaps with clamp-based responsive spacing variables
Create a set of spacing variables named space-xs through space-2xl and define each with a clamp-style fluid value that scales between the mobile and desktop breakpoints, then sweep every section, stack, and grid on the page replacing hardcoded gap and padding numbers with the nearest token. Audit for one-off pixel values and consolidate them into the scale so spacing stays proportional as the viewport shrinks. Document which token maps to which usage in a comment frame and verify no element collapses below a comfortable minimum on phone.
live preview
LayoutAdvanced~350 credits
Z-Pattern Landing Flow
Arrange alternating sections into a scannable Z reading path
Take the stack of feature sections and reorder them into an alternating Z layout: odd sections put media left and copy right, even sections flip media right and copy left, each section a two-column frame with a consistent center gutter. Keep vertical rhythm identical between sections by binding their top padding to one variable, and align each text block to a shared baseline. On tablet collapse every section to media-over-copy in source order, and add staggered scroll reveals that honor prefers-reduced-motion.
live preview
LayoutAdvanced~400 credits
Container Query Cards
Make cards reflow based on their container, not the viewport
Build a reusable card component whose internal layout responds to its own width rather than the global breakpoint: at narrow container widths stack the icon above the title and body, and at wider widths place the icon left in a horizontal row. Use a code override or component variants driven by a container-query style measurement so the same card adapts whether it sits in a sidebar, a three-up grid, or a full-width banner. Test all three placements on one page and confirm text never overflows or clips.
Tg.
live preview
LayoutAdvanced~350 credits
Magazine Multi-Column Text
Flow long body copy into balanced newspaper-style columns
Convert the long-form article body into a two-column magazine layout on desktop using CSS multi-column flow inside a code component, with a sensible column gap and a hairline rule between columns. Cap the measure so each column stays around 60 to 70 characters, add a drop-cap on the first paragraph via a text style, and keep a single readable column on tablet and phone. Preserve heading spacing across the column break and ensure images placed inline span both columns cleanly without orphaning a line.
live preview
LayoutAdvanced~350 credits
Overlapping Layered Composition
Stack elements with deliberate overlap and z-index control
Compose a layered hero where a large image, a translucent card, and a headline overlap intentionally: use absolute positioning inside a relative section frame, set explicit z-index order, and offset the card so it straddles the image edge by a fixed percentage. Bind the overlap offset to a variable so it scales between breakpoints, and on phone unstack the layers into a safe vertical order so nothing covers the headline. Add a subtle parallax depth on scroll for the back layer that disables under prefers-reduced-motion.
live preview
LayoutAdvanced~400 credits
Holy Grail App Shell
Build a header, footer, sidebar, and fluid main region
Construct a classic app shell: a fixed-height header, a fixed footer, a left sidebar of constant width, and a main content region that fills all remaining space and scrolls independently. Use a grid frame with named track sizing so the main area is the only flexible track, and make the sidebar collapsible into a top drawer below the tablet breakpoint. Keep the header and footer pinned, ensure the main region has its own overflow handling, and verify focus order stays logical when the sidebar collapses.
live preview
LayoutAdvanced~400 credits
Snap-Scroll Section Pager
Turn full-height sections into a snapping vertical pager
Make the page scroll as discrete full-viewport panels: set each top-level section to one hundred viewport-height tall and apply scroll-snap so the viewport locks to each section as the user scrolls. Add a fixed vertical dot indicator on the right that highlights the active panel, wired through a scroll override. Ensure inner content vertically centers within each panel, disable snapping on phone where panels exceed screen height, and turn off the smooth snap behavior when prefers-reduced-motion is set.
live preview
LayoutAdvanced~400 credits
Modular Section Library
Componentize repeating sections into reusable layout blocks
Extract the recurring section patterns on this page into a small library of reusable components: a media-and-copy block, a three-up feature row, and a centered statement block, each with property controls for heading, body, alignment, and an optional eyebrow. Replace the inline instances with component instances so edits propagate, set shared breakpoint behavior inside each component, and expose a variant toggle for left versus right media. Confirm the page renders identically after the swap and that overrides on one instance do not leak to others.
live preview
LayoutIntermediate~250 credits
Aspect-Ratio Media Grid
Lock gallery tiles to consistent ratios that never distort
Rebuild the image gallery so every tile holds a fixed aspect ratio regardless of source dimensions: wrap each image in a ratio-locked frame set to fill, with object-fit cover so nothing stretches. Lay the tiles into a responsive grid that shows four columns on desktop, two on tablet, and one on phone, keeping an even gap via a spacing variable. Add a featured tile spanning two columns and two rows, and verify the grid stays gap-aligned and equal-height as items wrap.
Be.
live preview
LayoutAdvanced~300 credits
Optical Alignment Pass
Nudge icons and text for visual rather than mathematical balance
Do an optical alignment pass across the page: where icons sit beside text, nudge them so they read as centered rather than measuring centered, correct punctuation and quotation marks that hang into margins, and align list bullets to the text baseline not the cap height. Balance the visual weight of buttons by trimming uneven internal padding, and ensure section centers account for asymmetric elements like badges. Make adjustments via small fixed offsets, document each nudge, and leave the underlying auto-layout intact.
live preview
LayoutAdvanced~400 credits
Two-Pane Docs Layout
Pair a sticky table of contents with scrollable article content
Build a documentation layout with a narrow sticky table-of-contents rail on the left and a wide article column on the right that scrolls. Generate the TOC from the article headings, wire active-section highlighting through a scroll override, and make TOC links smooth-scroll to anchors unless prefers-reduced-motion is set. Cap the article measure for readability, keep the rail pinned within the section bounds, and on tablet move the TOC into a collapsible accordion above the content while preserving the heading hierarchy.
live preview
LayoutAdvanced~350 credits
Diagonal Section Dividers
Separate sections with angled clip-path edges that stay responsive
Add angled transitions between three consecutive sections using clip-path diagonals so each section appears to slice into the next, alternating the slope direction. Implement via a code component that draws the angle as a percentage so it holds across widths, and inset content padding enough that text never falls into the clipped corner. Carry the background color across the seam so the cut reads as one continuous shape, flatten the angles on phone to avoid awkward gaps, and confirm no horizontal overflow appears at any breakpoint.
live preview
LayoutAdvanced~400 credits
Dense Data Table Layout
Lay out a wide table that stays usable on small screens
Lay out a comparison table with a sticky header row and a sticky first column so labels stay visible while scrolling a wide dataset. Set consistent cell padding from a spacing token, right-align numeric columns and left-align text, and zebra-stripe rows with a subtle color style. Below the tablet breakpoint, transform the table into stacked cards where each row becomes a labeled key-value block, preserving reading order. Ensure horizontal overflow is contained to the table region only and never breaks the page layout.
live preview
LayoutAdvanced~300 credits
Full-Bleed With Safe Gutters
Let media span edge-to-edge while content respects a max width
Set up a layout pattern where background bands and hero media run full-bleed to the viewport edges while text and buttons stay inside a centered content container with a max width and consistent side gutters. Define the container width and gutter as variables, build a reusable wrapper that breaks out to full width for media then snaps back for copy, and apply it across every section. Verify the gutters scale down gracefully on phone and that no full-bleed element introduces horizontal scrolling.
live preview
LayoutAdvanced~350 credits
Spanning Feature Grid
Mix single and multi-cell tiles in one cohesive grid
Design a feature grid on an explicit six-column track where tiles claim different spans: a hero tile spanning four columns and two rows, two medium tiles at three columns, and several small tiles at two. Keep a uniform gap from a spacing variable, let tiles fill their cells with equal height, and ensure the spans reflow sensibly to a two-column layout on tablet and a single column on phone. Confirm no empty gaps appear in the grid flow and that reading order stays logical after each reflow.
live preview
LayoutIntermediate~250 credits
Footer Mega-Menu Columns
Organize a large footer into balanced, responsive link columns
Restructure the footer into a balanced multi-column layout: a brand block on the left, then four link-group columns each with a category heading and a vertical list, plus a newsletter field. Use a grid that holds five columns on desktop, collapses to two on tablet, and stacks into accordion groups on phone. Align column tops to a shared baseline, set consistent vertical spacing between links via a token, apply a hairline divider above the legal row, and ensure tap targets meet a comfortable minimum on mobile.
live preview
LayoutAdvanced~300 credits
Breakpoint Visibility Rules
Show, hide, and reorder elements cleanly per device
Audit the page for elements that should change visibility or order across breakpoints, then implement device-specific rules: hide the desktop nav and reveal a hamburger on phone, swap a horizontal feature row for a swipeable stack on tablet, and reorder the hero so the image precedes copy on mobile only. Use breakpoint variants rather than duplicate hidden frames to avoid drift, keep the DOM order accessible, and verify nothing is shown twice or orphaned. Confirm hidden elements are not just visually clipped but removed from layout flow.
live preview
LayoutAdvanced~350 credits
Golden-Ratio Section Proportions
Size paired columns and blocks to a consistent ratio system
Apply a proportion system across the page so paired elements relate by a consistent ratio: set two-column sections to a roughly 1.618 split, size the hero image height against the headline block by the same factor, and scale section vertical padding in the same proportion as it grows toward desktop. Encode the ratio and base unit as variables so every dependent measure derives from them. Round to whole pixels to avoid sub-pixel blur, and verify the proportions still feel balanced after collapsing to a single column on phone.
live preview
LayoutAdvanced~400 credits
Sticky Stacking Cards
Pin scrolling cards so they stack and overlap on scroll
Turn a vertical list of feature cards into a sticky-stacking sequence: as the user scrolls, each card pins near the top and the next slides up to overlap it, building a layered deck. Implement via a scroll override that sets sticky positioning with incremental top offsets and a slight scale-down on the cards behind. Keep equal card heights, ensure the final card releases the pin so the page continues, fall back to a plain stacked list on phone, and disable the stacking motion when prefers-reduced-motion is set.