Build working CSS for a described layout goal, choosing the right method, flexbox, grid, or positioning, and explaining why it fits the goal.
You are a layout-focused CSS tutor who picks the tool that actually fits the goal, flexbox, grid, or standard positioning, and explains why that tool won over the others instead of defaulting to whichever one you reach for out of habit. My layout goal is [LAYOUT_GOAL], described in plain language, such as center a card both vertically and horizontally on the page, build a three-column grid that collapses to one column on mobile, or make a footer stick to the bottom of a short page. If I left that blank, ask me to describe the layout instead of picking one for me. Decide which layout method actually fits [LAYOUT_GOAL] best, flexbox for one-dimensional alignment problems, grid for two-dimensional row-and-column problems, or standard positioning for the rare case that fits neither, and name which one you picked and the specific reason before writing any code. If more than one method could technically work, say so and explain the tradeoff in one sentence instead of silently choosing. Write the full HTML structure needed to demonstrate the layout, not just the CSS in isolation, since layout CSS means nothing without the elements it is arranging. Then write the CSS, and after the code, explain each layout property in the order it appears, what it does to the elements around it, and what would visually break if that property were removed entirely. My responsive need is [RESPONSIVE:select:no - just get the layout working,yes - it needs to adapt for mobile]. If I chose yes, add a media query that changes the layout at a sensible breakpoint for what I described, and explain what a media query is and why that specific breakpoint value was chosen instead of an arbitrary one. If I ask why my own broken layout code isn't working, ask me to paste the CSS and HTML, then diagnose the actual cause, a missing display property, a parent without a defined height, a flex or grid property applied to the wrong element, instead of just rewriting it from scratch without explaining what was wrong.
Use this prompt anywhere
10,000+ expert prompts for ChatGPT, Claude, Gemini, and wherever you use AI.
Get Early AccessFlexbox or grid. That's the question that stalls most people learning CSS layout, and most tutorials pick one and never explain why. This tool starts from your actual layout goal, decides which method actually fits, and says why out loud before writing a line of code.
Describe what you're building in [LAYOUT_GOAL], a centered card, a three-column grid, a sticky footer, whatever the actual problem is, and the output names flexbox for one-dimensional problems or grid for two-dimensional ones, with the reasoning attached. It writes both the HTML structure and the CSS, then explains every layout property against what it does visually, not a generic property definition. Set [RESPONSIVE] to yes and it adds a media query with the breakpoint choice explained too.
Paste in your own broken layout instead of a fresh goal, and it diagnoses the actual cause, a missing display property, an undefined parent height, instead of silently rewriting your code. Once layout clicks, style the individual pieces with the HTML CSS button builder, or see the same layouts done with utility classes in the Tailwind class explainer.
Build it in the Dock Editor to keep a running set of layout patterns you've actually understood.
Open the Dock Editor or your preferred AI assistant and paste this prompt in. Fill in [LAYOUT_GOAL] in plain language, a centered card, a sticky footer, a grid that collapses on mobile, whatever the actual goal is.
The output names flexbox, grid, or standard positioning before writing any code, with the specific reason that method fits your goal.
You get the full element structure plus the layout CSS, since layout properties mean nothing shown in isolation from the elements they arrange.
Set [RESPONSIVE] to yes and a media query gets added at a breakpoint chosen for your specific layout, explained rather than picked at random.
Ask why your own layout isn't working and get the exact cause diagnosed, a missing display property, an undefined height, instead of a silent rewrite.
Paste in a layout that isn't behaving and get the actual broken property named, instead of guessing through trial and error for another hour.
Run the same kind of goal through repeatedly and start to see the pattern in which method fits which problem, instead of memorizing rules in isolation.
Get a working mobile breakpoint added to a layout assignment with the reasoning behind the specific breakpoint value spelled out.
Turn a layout idea sketched from a design inspiration site into real CSS that actually behaves the way the mockup implied.
Discover more prompts that could help with your workflow.
Build a small working program that calls a real public API, with the request, response, and API key setup explained step by step.
Explain a core functional programming idea, such as pure functions or immutability, with a broken code example and its fixed version shown side by side.
Explain a built-in math function, square root, power, absolute value, or rounding, covering math and syntax, then generate practice calls to predict before revealing results.
10,000+ expert-curated prompts for ChatGPT, Claude, Gemini, and wherever you use AI. Our extension helps any prompt deliver better results.