Skip to main content

Layout Patterns

Container Widths​

/* Standard */
max-w-6xl mx-auto px-4 sm:px-6 lg:px-8

/* Wide */
max-w-7xl mx-auto px-4 sm:px-6 lg:px-8

/* Text-focused */
max-w-4xl mx-auto

/* Narrow */
max-w-2xl mx-auto

Section Spacing​

/* Standard */
py-16 sm:py-20

/* Compact */
py-12

/* Header within section */
mb-12 sm:mb-16

Grid Systems​

/* 2-column responsive */
grid grid-cols-1 lg:grid-cols-2 gap-8

/* 3-column cards */
grid grid-cols-1 md:grid-cols-3 gap-8

/* Flex 50/50 split */
flex flex-col lg:flex-row

/* Flex 40/60 split */
lg:w-2/5 and lg:flex-1

Full-Height Sections​

/* Hero (accounting for header) */
min-h-[calc(100vh-4rem)]

/* Standard minimum */
min-h-[600px]

Responsive Breakpoints​

sm:  640px   /* Small tablets, large phones */
md:  768px   /* Tablets */
lg:  1024px  /* Desktops */
xl:  1280px  /* Large desktops */

Mobile-First Patterns​

Always start mobile, add breakpoint overrides:

/* Text sizing */
text-base sm:text-lg lg:text-xl

/* Padding */
p-4 sm:p-6 lg:p-8

/* Grid columns */
grid-cols-1 md:grid-cols-2 lg:grid-cols-3

/* Visibility */
hidden lg:block

/* Direction */
flex-col lg:flex-row

Example Layouts​

Full Section​

<section className="py-16 bg-white">
  <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <div className="text-center mb-16">
      <h2 className="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-8 leading-tight tracking-tight">
        Section Title
      </h2>
      <p className="text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed font-light">
        Subtitle
      </p>
    </div>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
      {/* Cards */}
    </div>
  </div>
</section>

Two-Column with Image​

<section className="relative overflow-hidden bg-white border-b border-gray-100">
  <div className="flex flex-col lg:flex-row min-h-[600px]">
    {/* Text */}
    <div className="lg:w-1/2 relative overflow-hidden flex items-center bg-gradient-to-br from-gray-50 to-white">
      <div className="w-full px-8 lg:px-16 py-16 lg:py-20">
        <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight tracking-tight">
          Heading
        </h2>
        <p className="text-xl leading-relaxed font-light text-gray-700 mb-10">
          Content
        </p>
      </div>
    </div>

    {/* Image */}
    <div className="lg:w-1/2 relative overflow-hidden">
      <div className="absolute inset-0">
        <Image src="..." fill className="object-cover scale-105 transition-transform duration-700 hover:scale-100" />
      </div>
      <div className="absolute inset-0 bg-gradient-to-r from-white via-white/40 to-transparent" />
    </div>
  </div>
</section>

Common Gaps​

/* Small */
gap-2, gap-3, gap-4

/* Standard */
gap-6, gap-8

/* Large */
gap-12, gap-16

Spacing Scale​

/* Tight */
mb-2, mb-4, mb-6

/* Standard */
mb-8, mb-12

/* Generous */
mb-16, mb-20, mb-24