Layout & Responsive Design
5 min read + 20 min hands-on
Target audience: Anyone whose layout instructions tend to be vague, or who wants to hand off responsive design to AI.
Prerequisites: Knowing what CSS grids and breakpoints are helps, but isn't required.
Saying “put things side by side” doesn’t communicate a layout. Specifying column counts, breakpoints, and content priority gives AI what it needs to generate layouts that work across every screen size.
4 Responsive Design Strategies
Section titled “4 Responsive Design Strategies”1. Specify breakpoints with numbers
Section titled “1. Specify breakpoints with numbers”Don’t say “make it mobile-friendly.” Say exactly when the layout changes.
Create a layout that switches from 3 columns on desktop (1024px+) to 2 columns on
tablet (768px to 1023px) and 1 column on mobile (below 768px).2. Describe mobile-specific behaviors
Section titled “2. Describe mobile-specific behaviors”Detail how individual elements should adapt on smaller screens.
On mobile, the navigation menu should collapse into a hamburger icon that, when clicked,
reveals a full-screen overlay menu with a close button in the top-right corner.3. Prioritize content for mobile
Section titled “3. Prioritize content for mobile”Tell AI what matters most on small screens.
On mobile, prioritize the sign-up form by placing it above the feature list.
On desktop, display them side-by-side.4. Specify touch-friendly element sizes
Section titled “4. Specify touch-friendly element sizes”Mobile interfaces need larger tap targets.
Make all buttons at least 44px tall on mobile for better touch targets,
with 16px spacing between interactive elements.Common Layout Pattern Templates
Section titled “Common Layout Pattern Templates”Bento Grid
Section titled “Bento Grid”Design a bento grid layout with mixed sized cells using grid-column-span and grid-row-span.
Make the featured item larger than the others.Modal Dialog
Section titled “Modal Dialog”Build a modal dialog with header, body, and footer. Include a close button (×) and
overlay backdrop with a fade-in animation.List Layout
Section titled “List Layout”Create a list layout with avatar images, name, description, and chevron icons.
Add subtle hover effects on each row.Alert Components
Section titled “Alert Components”Design alert components with success, error, warning, and info variants.
Include an icon, message, and dismiss button in each.Sidebar Navigation
Section titled “Sidebar Navigation”Create a dashboard layout with a fixed-width sidebar navigation, active state indicators,
and a main content area.Action Bar / Toolbar
Section titled “Action Bar / Toolbar”Build an action bar with formatting controls, dividers, and a primary action button
for content editing interfaces.Top Navigation Bar
Section titled “Top Navigation Bar”Design a responsive navigation bar with logo, menu links, and user profile.
Include dropdown menus and a mobile hamburger toggle.Tailwind Layout Tips
Section titled “Tailwind Layout Tips”When using Tailwind CSS, referencing class names directly improves output accuracy.
| Goal | Tailwind example |
|---|---|
| Responsive grid | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Centered container | container mx-auto px-4 |
| Flex row with gap | flex items-center gap-4 |
| Sticky header | sticky top-0 z-50 |