HomeCasa Prompts

Responsive breakpoint and grid strategy for a website or app

Define content-driven breakpoints, a grid per width range, behavior for each page template, container queries, responsive images, a test matrix and ready-to-use CSS tokens. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.

Intermediate · Text · Pending editorial review

Designed for:

Prompt

Act as a product designer and front-end developer specializing in responsive design.

Context:
- Product or site: {{product}}
- Main page templates: {{templates}}
- Device and screen width data: {{devices}}
- Tech stack: {{stack}}
- Priority content on small screens: {{priority}}

Deliverables:
1. Approach: why breakpoints should follow where the content breaks rather than device models, and whether to go mobile-first.
2. A proposal of 3-5 breakpoints with rationale, in px and em.
3. Grid per range: columns, gutters, side margins and maximum content width.
4. A behavior table per template and breakpoint: navigation, header, card grids, tables, forms, images and sidebars.
5. Components that should use container queries instead of media queries, with examples.
6. Fluid type and spacing with clamp(), consistent with the breakpoints.
7. Images: srcset and sizes, art direction with picture and modern formats.
8. Touch versus pointer differences: hover and pointer media queries, touch target sizes.
9. Test matrix: key widths, 400% zoom and reflow at 320 CSS px (WCAG 1.4.10), orientation and enlarged text.
10. Tokens and sample code for the stated stack.

Constraints:
- Do not invent analytics; if missing, use [FILL IN: real share of visits per width] and explain how to get it.
- Prioritize what users need on mobile; never hide essential content.
- If key information about the templates is missing, ask me first.

Format: numbered headings, tables for the grid and behavior, and code blocks.

How to use it

  1. List your main templates and, if you have it, real screen width data. 2. Review the behavior table with design and engineering. 3. Move the tokens into your code and run the test matrix on every template.

Usage example

Product: city hotel chain website · Templates: home, listing, hotel page, booking · Stack: Tailwind · Priority: dates and price.

Sample output

1. Approach

Mobile-first, with breakpoints where the content breaks (for example, when the hotel card no longer fits in one column), not by device model. Usage data: [FILL IN: share of visits by screen width]; pull it from your analytics tool grouped by viewport width.

3. Grid

RangeColumnsGutterMarginMax width
< 640px (40em)416px16px100%
640-1023px824px24px100%
1024-1279px1224px32px100%
≥ 1280px (80em)1232pxauto1200px

4. Hotel page behavior

  • Mobile: date picker, nightly price and "Book" in a sticky bottom bar; never hidden.
  • Desktop: booking card sticks in the right column (4 of 12).

10. Tailwind tokens

// tailwind.config.js
module.exports = {
  theme: {
    screens: { sm: '40em', md: '48em', lg: '64em', xl: '80em' },
    container: {
      center: true,
      padding: { DEFAULT: '1rem', sm: '1.5rem', lg: '2rem' },
    },
    extend: { maxWidth: { content: '75rem' } },
  },
};

Em-based breakpoints respect the browser's text zoom…

Key facts

Category
UI/UX design · Responsive design
Output type
Text
Level
Intermediate
Designed for
ChatGPT, Claude, Gemini and Microsoft Copilot
Verified in
Pending editorial verification
Variables
Product or site, Main templates, Device data, Tech stack and Priority content on mobile
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Should I just use my CSS framework's breakpoints?

They are a good starting point, but adjust them to where your content actually breaks. The prompt tells you whether the defaults fit or whether you need to add or move one.

What are container queries and when should I use them?

They let a component change based on the width of its container rather than the screen. They are useful for cards or widgets that appear in columns of different widths.

What is this prompt for?

Define content-driven breakpoints, a grid per width range, behavior for each page template, container queries, responsive images, a test matrix and ready-to-use CSS tokens.

Which AI tools does it work with?

It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Product or site, Main templates, Device data, Tech stack and Priority content on mobile). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is intermediate: it helps to know the topic so you can provide good context and review the result critically.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts