Prompt Almanac

Create intermediate Works with: ChatGPT, Gemini, Claude

Responsive Dashboard Layout in CSS Grid

Table output Needs web browsing

Generate layout code with fluid behavior and accessible structure.

Open in ChatGPTOpen in Claude

The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.

Generate a responsive dashboard layout in CSS Grid with accessible structure. Dashboard content (panels, charts, tables, filters): [DASHBOARD_PANELS]. Breakpoints and devices: [BREAKPOINTS]. Framework or plain CSS: [FRAMEWORK]. Browser support: [BROWSER_SUPPORT].

First produce a plan as tables:
1. Panel table: Panel | Priority on small screens | Columns spanned at small, medium, and large | Minimum width | Notes on its content.
2. Breakpoint table: Width range | Grid columns | Gap | Panel order.

Then give the code: HTML with landmark regions (header, nav, main, sections with headings), CSS using named grid areas or auto-fit with minmax for fluid behavior, container queries where useful (with a fallback), logical properties, and no fixed heights that clip content. Charts need text alternatives (a summary and a data table alternative). Tables scroll within a labeled region instead of breaking the page. Include focus order that matches visual order, a skip link, prefers-reduced-motion handling, and printing styles.

Explain three decisions in comments and list the tests: resize from 320 to 1920 pixels, 200 percent zoom, keyboard navigation, and screen reader landmark list.

Fill in before use

Optional: type your details and the prompt above updates. Nothing is saved or sent.

Replace each bracketed placeholder with your own details, then paste into ChatGPT, Gemini, Claude or another assistant.

Related prompts