Flexbox & Grid

<!-- Flexbox -->
<div class="flex">Horizontal row (default)</div>
<div class="flex flex-col">Vertical column</div>
<div class="flex flex-wrap">Wrap to next line when full</div>

<!-- Alignment -->
<div class="flex items-center">Vertically centered</div>
<div class="flex items-start">Align to top</div>
<div class="flex items-end">Align to bottom</div>
<div class="flex items-stretch">Stretch to fill (default)</div>

<div class="flex justify-center">Horizontally centered</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-end">Align right</div>

<!-- Gap -->
<div class="flex gap-4">1rem gap between items</div>
<div class="flex gap-x-4 gap-y-2">Different horizontal/vertical gaps</div>

<!-- Flex children -->
<div class="flex">
  <div class="flex-1">Grows to fill space</div>
  <div class="w-48">Fixed width sidebar</div>
</div>

<!-- Common navbar pattern -->
<nav class="flex items-center justify-between px-6 py-4 bg-white border-b">
  <a href="/" class="font-bold text-xl">Logo</a>
  <div class="flex items-center gap-6">
    <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
    <a href="/blog"  class="text-gray-600 hover:text-gray-900">Blog</a>
    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm">Sign in</button>
  </div>
</nav>

<!-- CSS Grid -->
<div class="grid grid-cols-3 gap-6">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- Auto-fill responsive grid (most common pattern) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- Cards go here — auto-wraps based on screen size -->
</div>

<!-- Spanning columns -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-3">Main content (3 of 4 cols)</div>
  <div class="col-span-1">Sidebar (1 of 4 cols)</div>
</div>

<!-- Spanning rows -->
<div class="grid grid-cols-3 grid-rows-3 gap-4 h-64">
  <div class="col-span-2 row-span-2 bg-blue-500">Featured</div>
  <div class="bg-gray-200">Item 2</div>
  <div class="bg-gray-200">Item 3</div>
  <div class="col-span-3 bg-gray-100">Footer row</div>
</div>

<!-- Place items -->
<div class="grid place-items-center h-screen">
  <p>Perfectly centered, vertically and horizontally</p>
</div>