Web Development · Front-end
The Best Prompt for a Responsive CSS Layout
The best prompt for CSS layout describes how the layout should behave as space changes, then asks the model to choose Grid or Flexbox for each region and say why. This prompt favors intrinsic sizing over stacks of breakpoints, bans the usual fragile shortcuts such as fixed heights and positioning hacks, and returns semantic HTML, commented CSS and a list of content and viewport cases to check in a browser.
Responsive CSS Layout Prompt
Builds a layout with Grid, Flexbox and container queries that adapts to its content, with the reasoning and the edge cases to test.
- Works with
- ChatGPT, Claude, Gemini, Cursor
- Difficulty
- Beginner
- Complexity
- Multi-part reply
- Variables
- 6
- Version
- 1.0
Customize this prompt
Fill in what you know. Anything left blank stays as a [bracketed placeholder]. Nothing you type leaves your browser.
6 variables · fields marked * matter most
Build a responsive layout with modern CSS. I want code I can maintain, so explain the layout decisions briefly and keep the CSS small. LAYOUT What I need: [Layout] Content that goes in it: [Content in the layout] How it should adapt: [How it should adapt] Styling approach: [Styling approach] Browser support: [Browser support] Existing tokens or constraints: [Existing tokens or constraints] DECIDE FIRST In a few bullets before any code: - For each region, Grid or Flexbox and the reason. Use Grid when rows and columns must align in two dimensions; use Flexbox when items flow along one axis and size from their content. - Which adaptations can be intrinsic (auto-fit or auto-fill with minmax, flex-wrap, clamp, min and max functions) and which truly need a query. - For each query, whether it should be a container query (the component responds to the space it is given) or a media query (the page responds to the viewport). THEN WRITE 1. HTML: semantic elements, in the order the content should be read and tabbed through. Do not reorder visually in a way that breaks that order. 2. CSS: mobile-first, with a short comment above each rule group saying what it achieves. RULES - No fixed heights on containers that hold text. No absolute positioning or negative margins to create the main structure. No floats. - Spacing between items uses gap. Use logical properties (inline and block) for spacing and sizing. - Size with rem, fr, percentages and viewport or container units as appropriate; px only for borders and similar hairlines. - Nothing may cause horizontal scrolling at a 320 CSS pixel viewport, and text must be able to grow to 200 percent without clipping or overlap. - Grid and flex children that contain long text or media need min-width: 0 or an equivalent so they can shrink. - Use my tokens where given. Do not invent a color palette or type scale; use plain placeholders and say so. - If a feature falls outside the stated browser support, provide a fallback or name the gap. If you are unsure of support, say so instead of asserting it. - No JavaScript for layout. FINISH WITH - A table: available width, what the layout does, which rule causes it. - A test list: the content extremes and viewport conditions I should check in a browser, such as very long words, a single item, many items, missing images and zoomed text.
Use it when you are
- Building a card grid, dashboard shell or sidebar layout without a CSS framework
- Replacing a float-based or breakpoint-heavy layout with Grid and Flexbox
- Making a component adapt to its container so it can be reused in narrow and wide slots
- Learning why a layout technique was chosen, not only receiving the code
Why this prompt works
Behavior is the input, not a breakpoint list
Describing how the layout should respond to available space lets the model reach for intrinsic techniques, such as auto-fit columns with a minimum width, that adapt continuously. Handing it three pixel values instead tends to produce three media queries and a layout that breaks between them.
The Grid or Flexbox choice is argued, region by region
The prompt states the test for each: two-dimensional alignment for Grid, one-axis flow sized by content for Flexbox. Asking for the reason per region catches the frequent mismatch where a card grid is built from wrapping flex items and the last row stretches unevenly.
Fragile shortcuts are named and excluded
Fixed heights on text containers, structural absolute positioning and negative-margin tricks all look fine with sample content and fail with real content. Listing them explicitly is more effective than asking for clean CSS, because the model knows exactly which habits to avoid.
Reflow and text resizing are built into the rules
WCAG 2.2 includes criteria for reflow at narrow widths and for resizing text. Writing the 320 CSS pixel and 200 percent conditions into the rules makes them design constraints from the first line, not something discovered in an audit later.
The closing table and test list make it checkable
CSS that cannot be run by the model has to be verified by you. The width-to-behavior table tells you what should happen and which rule is responsible, and the test list points you to the content extremes where layouts usually fail.
How to use it
- Describe the regions of the layout and what sits inside each, in the order a reader should meet them.
- Give content ranges: the shortest and longest titles, the fewest and most items, whether images can be missing.
- Explain how it should adapt in words, for example what moves below what when space runs out, and any minimum sizes.
- State your browser support honestly; it decides whether newer features need fallbacks.
- Paste the result into a page and resize the window slowly from wide to 320 pixels, watching for jumps and overflow.
- Go through the test list with real content, then zoom text to 200 percent and tab through to confirm the order still makes sense.
AI model compatibility
| Model | Status | Notes |
|---|---|---|
| ChatGPT | Expected to work | If you can attach a screenshot or sketch of the intended layout, do so, but keep the written behavior description; the adaptation rules are rarely visible in a single image. |
| Claude | Expected to work | When pasting existing markup you must keep, wrap it in XML-style tags and say it is fixed. Anthropic's guidance recommends tags for separating supplied material from instructions. |
| Gemini | Expected to work | No model-specific adjustment needed. Paste the prompt as written. |
| Cursor | Expected to work | In a repo, point the tokens field at your variables or theme file and name the component file to edit, so the output uses your custom properties and class naming. |
“Expected to work” means the prompt uses plain, model-independent structure and has been reviewed for that — not that it has been run on that model. A model is marked Tested only when a test record is published below.
Worked example
Scenario: An illustrative case: a developer rebuilding a blog index page without a CSS framework.
Build a responsive layout with modern CSS. I want code I can maintain, so explain the layout decisions briefly and keep the CSS small. LAYOUT What I need: Blog index: site header, one featured post, a grid of post cards, and a sidebar with a category list and a newsletter signup form Content that goes in it: Cards have a 16:9 image (sometimes missing), a title of 3 to 15 words, a two-line excerpt and a date. Between 1 and 30 cards. Category names can be long. How it should adapt: Sidebar sits beside the card grid when there is room and drops below it when there is not. Cards are never narrower than about 16rem and fill the row evenly. The featured post puts image and text side by side when its own container is wide enough. Styling approach: Plain CSS Browser support: Current and previous major versions of Chrome, Safari, Firefox and Edge Existing tokens or constraints: --space-1 through --space-8, --radius-md, --content-max: 72rem DECIDE FIRST In a few bullets before any code: - For each region, Grid or Flexbox and the reason. Use Grid when rows and columns must align in two dimensions; use Flexbox when items flow along one axis and size from their content. - Which adaptations can be intrinsic (auto-fit or auto-fill with minmax, flex-wrap, clamp, min and max functions) and which truly need a query. - For each query, whether it should be a container query (the component responds to the space it is given) or a media query (the page responds to the viewport). THEN WRITE 1. HTML: semantic elements, in the order the content should be read and tabbed through. Do not reorder visually in a way that breaks that order. 2. CSS: mobile-first, with a short comment above each rule group saying what it achieves. RULES - No fixed heights on containers that hold text. No absolute positioning or negative margins to create the main structure. No floats. - Spacing between items uses gap. Use logical properties (inline and block) for spacing and sizing. - Size with rem, fr, percentages and viewport or container units as appropriate; px only for borders and similar hairlines. - Nothing may cause horizontal scrolling at a 320 CSS pixel viewport, and text must be able to grow to 200 percent without clipping or overlap. - Grid and flex children that contain long text or media need min-width: 0 or an equivalent so they can shrink. - Use my tokens where given. Do not invent a color palette or type scale; use plain placeholders and say so. - If a feature falls outside the stated browser support, provide a fallback or name the gap. If you are unsure of support, say so instead of asserting it. - No JavaScript for layout. FINISH WITH - A table: available width, what the layout does, which rule causes it. - A test list: the content extremes and viewport conditions I should check in a browser, such as very long words, a single item, many items, missing images and zoomed text.
What a good response should contain
- A decision list that uses Grid for the page shell and the card grid, and Flexbox or a simple flow layout inside each card
- A card grid built with auto-fit or auto-fill and minmax so the column count changes without media queries
- A container query on the featured post so it switches orientation based on its own width, with a note on browser support
- HTML where the main content precedes the sidebar in source order and uses elements such as main, article and aside
- A test list that includes a single card, a missing image, a very long category name and text zoomed to 200 percent
This is an illustrative scenario showing how to fill in the prompt and what to look for. It is not a recorded model output. Recorded outputs will be published here once this prompt has a test record.
Testing and editorial review
Status: Untested. Reviewed for structure and clarity by the editorial team. No recorded model test yet.
No test record has been published for this prompt yet. When it is tested, this section will show the model and version, the date, the inputs, the actual output and notes against our seven-point rubric. We do not publish numerical scores.
| Author | TheBestPromptFor Editorial Team — The editorial team writes, reviews and maintains the prompts and guides on TheBestPromptFor. Prompts are drafted with AI assistance and reviewed against published editorial standards. |
|---|---|
| Published | November 15, 2026 |
| Last reviewed | November 15, 2026 |
| Last tested | Not yet tested |
| Version history |
|
Limitations and things to check
- The model cannot render the page. Only a browser will show whether the layout behaves as described.
- Statements about browser support for newer CSS features should be checked against current compatibility data.
- Colors, type and visual polish are outside its scope unless you provide tokens.
- Complex existing stylesheets can override or conflict with the generated rules; the prompt assumes a fairly clean starting point.
Alternative prompts
Web Design
Responsive Design Prompt
Turns one page layout into responsive rules: content order on small screens, fluid techniques, justified breakpoints and a per-component behavior table.
- ChatGPT
- Claude
- Gemini
Web Development
React Component Prompt
Makes the model plan components, state and effects before coding, then deliver complete files, tests and a list of what it assumed.
- ChatGPT
- Claude
- Gemini
- Cursor
Web Design
Wireframing Prompt
Produces a low-fidelity wireframe of one screen as a text diagram and block spec, with content priority, states and annotations and no visual styling.
- ChatGPT
- Claude
- Gemini
Web Design
Accessibility Audit Prompt
Reviews page markup against WCAG 2.2, separating issues confirmed in the code from those needing manual testing, with fixes and a test script.
- ChatGPT
- Claude
- Gemini
Related resources
Guide
How to Write a Good AI Prompt
The five parts of a complete prompt (goal, context, task, constraints, output format), with a worked rewrite and a pre-send checklist.
Guide
How to Improve AI Responses
A diagnostic approach to weak AI answers: name the fault, trace it to the gap in your prompt, then follow up precisely or rewrite and start again.
Frequently asked questions
Should I use CSS Grid or Flexbox for my layout?
Often both. Grid suits structures where items must line up in rows and columns, such as a page shell or a card grid. Flexbox suits a single row or column where items size from their content, such as a toolbar. The prompt asks the model to choose per region and justify it.
Do I still need media queries?
Fewer than you might expect. Intrinsic sizing handles many cases, and container queries handle components that appear in differently sized slots. Media queries remain appropriate for page-level changes tied to the viewport, and the prompt asks the model to say which kind each query is.
Does this prompt work with Tailwind CSS?
Yes. Choose Tailwind as the styling approach and the model should express the same decisions as utility classes. Ask it to note any place where an arbitrary value or a small custom rule is needed, since some grid templates are awkward to write as utilities.
Sources and references
- CSS layout — MDN Web Docs
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
Was this prompt useful?
No account needed. Do not include personal information.