Flexbox & Grid Layouts

Flexbox & Grid in Tailwind

Tailwind provides comprehensive utilities for both Flexbox and CSS Grid, making it easy to create complex, responsive layouts.

Flexbox Basics

<!-- Enable Flexbox -->
<div class="flex">...</div>
<div class="inline-flex">...</div>

<!-- Flex Direction -->
<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Reversed horizontal</div>
<div class="flex flex-col-reverse">Reversed vertical</div>

Justify Content (Main Axis)

<div class="flex justify-start">Start (default)</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-end">End</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<div class="flex justify-evenly">Space evenly</div>

Align Items (Cross Axis)

<div class="flex items-start">Align start</div>
<div class="flex items-center">Align center</div>
<div class="flex items-end">Align end</div>
<div class="flex items-baseline">Align baseline</div>
<div class="flex items-stretch">Stretch (default)</div>

Flex Wrap

<div class="flex flex-wrap">Wrap items</div>
<div class="flex flex-nowrap">Don't wrap (default)</div>
<div class="flex flex-wrap-reverse">Wrap reversed</div>

Gap (Spacing Between Items)

<div class="flex gap-4">Gap on both axes</div>
<div class="flex gap-x-4">Horizontal gap only</div>
<div class="flex gap-y-4">Vertical gap only</div>

Flex Item Utilities

<div class="flex">
  <div class="flex-1">Grow and shrink equally</div>
  <div class="flex-auto">Grow based on content</div>
  <div class="flex-none">Don't grow or shrink</div>
  <div class="flex-initial">Shrink but don't grow</div>
</div>

<!-- Grow and Shrink -->
<div class="grow">Allow growing</div>
<div class="grow-0">Prevent growing</div>
<div class="shrink">Allow shrinking</div>
<div class="shrink-0">Prevent shrinking</div>

<!-- Order -->
<div class="order-first">First</div>
<div class="order-last">Last</div>
<div class="order-1">Order 1</div>

Common Flexbox Patterns

<!-- Centered content -->
<div class="flex items-center justify-center min-h-screen">
  <div>Perfectly centered!</div>
</div>

<!-- Navigation bar -->
<nav class="flex items-center justify-between px-6 py-4">
  <div class="font-bold text-xl">Logo</div>
  <div class="flex gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Card row -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 1</div>
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 2</div>
  <div class="flex-1 min-w-[300px] p-4 border rounded">Card 3</div>
</div>

CSS Grid Basics

<!-- Enable Grid -->
<div class="grid">...</div>

<!-- Grid Columns -->
<div class="grid grid-cols-1">1 column</div>
<div class="grid grid-cols-2">2 columns</div>
<div class="grid grid-cols-3">3 columns</div>
<div class="grid grid-cols-4">4 columns</div>
<div class="grid grid-cols-12">12 columns</div>

<!-- Grid Rows -->
<div class="grid grid-rows-3">3 rows</div>
<div class="grid grid-rows-4">4 rows</div>

Grid Gap

<div class="grid grid-cols-3 gap-4">Gap on both axes</div>
<div class="grid grid-cols-3 gap-x-4 gap-y-8">Different gaps</div>

Grid Item Spanning

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-1">1 column</div>
  <div class="col-span-2">2 columns</div>
  <div class="col-span-3">3 columns</div>
  <div class="col-span-full">Full width</div>

  <!-- Row spanning -->
  <div class="row-span-2">2 rows</div>
</div>

<!-- Start and end positions -->
<div class="col-start-2 col-end-4">Columns 2-3</div>
<div class="row-start-1 row-end-3">Rows 1-2</div>

Common Grid Patterns

<!-- Responsive card grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 border rounded">Card 1</div>
  <div class="p-4 border rounded">Card 2</div>
  <div class="p-4 border rounded">Card 3</div>
  <div class="p-4 border rounded">Card 4</div>
  <div class="p-4 border rounded">Card 5</div>
  <div class="p-4 border rounded">Card 6</div>
</div>

<!-- Holy grail layout -->
<div class="grid grid-cols-12 gap-4 min-h-screen">
  <header class="col-span-12 bg-gray-100 p-4">Header</header>
  <aside class="col-span-2 bg-gray-50 p-4">Sidebar</aside>
  <main class="col-span-8 p-4">Main Content</main>
  <aside class="col-span-2 bg-gray-50 p-4">Right Sidebar</aside>
  <footer class="col-span-12 bg-gray-100 p-4">Footer</footer>
</div>

<!-- Auto-fit grid -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div class="p-4 border">Auto-sized card</div>
  <div class="p-4 border">Auto-sized card</div>
  <div class="p-4 border">Auto-sized card</div>
</div>