Layout & Grid

Responsive layout patterns and breakpoints for Juniro's platforms.

---

Breakpoints

sm

640pxMobile landscape

md

768pxTablet portrait

lg

1024pxTablet landscape / Small laptop

xl

1280pxDesktop

2xl

1536pxLarge desktop

---

Container Widths

// Standard container with responsive padding
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
  {/* Content */}
</div>

// Max-width variants
<div className="max-w-sm">320px</div>   // Small forms
<div className="max-w-md">448px</div>   // Modals
<div className="max-w-lg">512px</div>   // Cards
<div className="max-w-xl">576px</div>   // Wide cards
<div className="max-w-2xl">672px</div>  // Content
<div className="max-w-4xl">896px</div>  // Wide content
<div className="max-w-6xl">1152px</div> // Page content
<div className="max-w-7xl">1280px</div> // Full page

---

Grid System

Activity Cards Grid

Card 1

Card 2

Card 3

Card 4

// Responsive grid for activity cards
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
  {activities.map(activity => (
    <ActivityCard key={activity.id} {...activity} />
  ))}
</div>

---

Page Layouts

Dashboard Layout

Sidebar

Navigation items

Header / Breadcrumbs

Main Content

Side Panel

// Dashboard layout structure
<div className="flex min-h-screen">
  {/* Sidebar - fixed width */}
  <aside className="w-64 bg-gray-900 text-white hidden lg:block">
    <Sidebar />
  </aside>

  {/* Main content - flexible */}
  <main className="flex-1 p-6">
    <Header />
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <div className="lg:col-span-2">
        <MainContent />
      </div>
      <div>
        <SidePanel />
      </div>
    </div>
  </main>
</div>

---

Two-Column Layout

Main Content (2/3)

Sidebar (1/3)

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <div className="lg:col-span-2">
    {/* Main content */}
  </div>
  <div>
    {/* Sidebar */}
  </div>
</div>

---

Spacing Patterns

Section Spacing

// Page sections
<section className="py-12 md:py-16 lg:py-24">
  <div className="container mx-auto px-4">
    {/* Section content */}
  </div>
</section>

// Card spacing
<div className="p-4 md:p-6">
  {/* Card content */}
</div>

// Stack spacing (vertical)
<div className="space-y-4 md:space-y-6">
  <Item />
  <Item />
  <Item />
</div>

// Inline spacing (horizontal)
<div className="flex gap-2 md:gap-4">
  <Button />
  <Button />
</div>

---

Mobile-First Pattern

Always start with mobile styles, then add responsive overrides:

// ✅ Correct - Mobile first
<div className="
  p-4           /* Mobile: 16px padding */
  md:p-6        /* Tablet: 24px padding */
  lg:p-8        /* Desktop: 32px padding */

  text-sm       /* Mobile: 14px text */
  md:text-base  /* Tablet+: 16px text */

  grid-cols-1   /* Mobile: single column */
  sm:grid-cols-2 /* Small: two columns */
  lg:grid-cols-4 /* Large: four columns */
">

---

Common Layout Patterns

Pattern	Mobile	Tablet	Desktop
Activity grid	1 col	2 cols	3-4 cols
Dashboard	Stack	2 cols	Sidebar + content
Form	Full width	Max 500px	Max 500px centered
Modal	Full screen	500px centered	500px centered
Navbar	Hamburger	Hamburger	Full nav

---

See Tailwind docs for complete responsive design reference.