Responsive Layout Builder

Responsive Layout Builder

Instructions

When building responsive layouts:

1. Identify the layout pattern (grid, sidebar, cards, etc.)
2. Start mobile-first
3. Use appropriate CSS technique (Grid vs Flexbox)
4. Add breakpoints for larger screens
5. Test across viewports

Breakpoints

/* Tailwind defaults */
sm: 640px   /* Small devices */
md: 768px   /* Tablets */
lg: 1024px  /* Laptops */
xl: 1280px  /* Desktops */
2xl: 1536px /* Large screens */

/* Custom CSS */
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }

Common Layout Patterns

1. Holy Grail Layout

// Tailwind CSS
<div className="min-h-screen flex flex-col">
  <header className="h-16 bg-white border-b">Header</header>

  <div className="flex-1 flex">
    <aside className="hidden md:block w-64 bg-gray-50 border-r">
      Sidebar
    </aside>
    <main className="flex-1 p-6">
      Main Content
    </main>
  </div>

  <footer className="h-16 bg-white border-t">Footer</footer>
</div>

/* Plain CSS */
.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
}