Write a CSS Layout (Grid or Flexbox)
Generate clean, responsive CSS layouts using Grid or Flexbox with cross-browser support.
The Prompt
Write the CSS/Tailwind for the following layout. Include: 1. The complete CSS (or Tailwind classes) 2. Responsive breakpoints (mobile → tablet → desktop) 3. A brief explanation of the layout approach chosen 4. Any cross-browser gotchas Layout description: [DESCRIBE YOUR LAYOUT — e.g., A 3-column card grid on desktop, 2 columns on tablet, 1 column on mobile, with a sticky header, a left sidebar that collapses to a top nav on mobile, and a footer that sticks to the bottom on short pages] Preference: [TAILWIND CLASSES / PURE CSS / CSS MODULES] Target browsers: [MODERN / IE11 SUPPORT NEEDED]
Example Output
Used CSS Grid with named template areas for the desktop layout, switching to a single-column flow with `@media (max-width: 768px)`. The sidebar becomes a full-width top bar on mobile using `grid-template-areas` redefinition. Added `min-height: 100dvh` for the sticky footer pattern.
FAQ
Which AI model is best for Write a CSS Layout (Grid or Flexbox)?
GPT-4o is reliable for CSS. Claude Sonnet 4 for more complex layouts requiring detailed explanation.
How do I use the Write a CSS Layout (Grid or Flexbox) prompt?
Copy the prompt, replace the [BRACKETED] placeholders with your specific information, and paste into your preferred AI assistant (ChatGPT, Claude, Gemini, etc.). Used CSS Grid with named template areas for the desktop layout, switching to a single-column flow with `@media (max-width: 768px)`. The sidebar becomes a full-width top bar on mobile using `grid-template-areas` redefinition. Added `min-height: 100dvh` for the sticky footer pattern.
Model Recommendation
GPT-4o is reliable for CSS. Claude Sonnet 4 for more complex layouts requiring detailed explanation.