nonobieBETA
GitHub
HomeCSS Tailwind
Chapter 4

04 — Flexbox & Grid Layouts

Flexbox Fundamentals

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Direction

<div class="flex flex-row">        <!-- Left to right (default) -->
<div class="flex flex-col">        <!-- Top to bottom -->
<div class="flex flex-row-reverse"> <!-- Right to left -->
<div class="flex flex-col-reverse"> <!-- Bottom to top -->

Justify Content (Main Axis)

<div class="flex justify-start">    <!-- Items to start (default) -->
<div class="flex justify-end">      <!-- Items to end -->
<div class="flex justify-center">   <!-- Items centered -->
<div class="flex justify-between">  <!-- Equal space between -->
<div class="flex justify-around">   <!-- Equal space around -->
<div class="flex justify-evenly">   <!-- Equal space including edges -->

Align Items (Cross Axis)

<div class="flex items-start">    <!-- Top aligned -->
<div class="flex items-end">      <!-- Bottom aligned -->
<div class="flex items-center">   <!-- Vertically centered -->
<div class="flex items-baseline"> <!-- Text baseline aligned -->
<div class="flex items-stretch">  <!-- Stretch to fill (default) -->

Gap

<div class="flex gap-4">           <!-- 1rem gap all around -->
<div class="flex gap-x-4 gap-y-2"> <!-- Horizontal/vertical gaps -->

Wrap

<div class="flex flex-wrap">      <!-- Allow wrapping -->
<div class="flex flex-nowrap">    <!-- Single line (default) -->
<div class="flex flex-wrap-reverse"> <!-- Wrap in reverse -->

Flex Item Properties

<div class="flex">
  <div class="flex-1">         <!-- Grow and shrink -->
  <div class="flex-none">      <!-- Don't grow or shrink -->
  <div class="flex-grow">      <!-- Grow if needed -->
  <div class="flex-shrink">    <!-- Shrink if needed -->
  <div class="flex-initial">   <!-- Initial (don't grow, can shrink) -->
  <div class="flex-auto">      <!-- Grow and shrink as needed -->
</div>

Align Self

<div class="flex">
  <div class="self-auto">      <!-- Use align-items (default) -->
  <div class="self-start">     <!-- Align to start -->
  <div class="self-end">       <!-- Align to end -->
  <div class="self-center">    <!-- Center -->
  <div class="self-stretch">   <!-- Stretch -->
  <div class="self-baseline">  <!-- Baseline -->
</div>

Order

<div class="flex">
  <div class="order-1">First</div>   <!-- Order 1 -->
  <div class="order-2">Second</div>  <!-- Order 2 -->
  <div class="order-3">Third</div>   <!-- Order 3 -->
</div>

Common Flexbox Patterns

1. Horizontal Centering

<div class="flex justify-center">
  <div>Centered content</div>
</div>

2. Vertical Centering

<div class="flex items-center">
  <div>Vertically centered</div>
</div>

3. Both Axes Centering

<div class="flex justify-center items-center">
  <div>Perfectly centered</div>
</div>

4. Space Between

<div class="flex justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

5. Navigation Bar

<nav class="flex justify-between items-center p-4 bg-slate-800">
  <div class="text-white font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="/" class="text-white">Home</a>
    <a href="/about" class="text-white">About</a>
    <a href="/contact" class="text-white">Contact</a>
  </div>
</nav>

6. Card with Footer at Bottom

<div class="flex flex-col h-64 border rounded-lg">
  <div class="p-4 flex-1">Content</div>
  <div class="p-4 border-t">Footer always at bottom</div>
</div>

7. Input Group (Button attached to input)

<div class="flex">
  <input type="text" class="flex-1 border rounded-l px-3 py-2">
  <button class="bg-blue-500 text-white px-4 rounded-r">
    Search
  </button>
</div>

CSS Grid Fundamentals

<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Grid Template Columns

<div class="grid grid-cols-1">        <!-- 1 column -->
<div class="grid grid-cols-2">        <!-- 2 columns -->
<div class="grid grid-cols-3">        <!-- 3 columns -->
<div class="grid grid-cols-4">        <!-- 4 columns -->
<div class="grid grid-cols-12">       <!-- 12 columns -->
 
<!-- Custom sizes -->
<div class="grid grid-cols-[100px_1fr_200px]">
  <!-- 100px, flexible, 200px -->
</div>
 
<!-- Fractional units -->
<div class="grid grid-cols-[1fr_2fr_1fr]">
  <!-- 1:2:1 ratio -->
</div>

Grid Template Rows

<div class="grid grid-rows-3">       <!-- 3 rows -->
<div class="grid grid-rows-[100px_1fr]">  <!-- Custom heights -->

Gap

<div class="grid gap-4">             <!-- All gaps 1rem -->
<div class="grid gap-x-4 gap-y-6">   <!-- Horizontal/vertical -->

Grid Item Placement

Span Columns

<div class="grid grid-cols-4">
  <div class="col-span-2">Spans 2 columns</div>
  <div>1 column</div>
  <div>1 column</div>
</div>

Start/End Lines

<div class="grid grid-cols-4">
  <div class="col-start-2 col-end-4">
    Columns 2 to 3 (spans 2)
  </div>
</div>

Span Rows

<div class="grid grid-rows-3">
  <div class="row-span-2">Spans 2 rows</div>
</div>

Start/End Row Lines

<div class="grid grid-rows-4">
  <div class="row-start-2 row-end-4">
    Rows 2 to 3
  </div>
</div>

Grid Template Areas

<div class="grid grid-cols-[200px_1fr] grid-rows-[auto_1fr_auto] gap-4">
  <header class="col-span-2 bg-slate-200 p-4">
    Header
  </header>
  
  <aside class="bg-slate-100 p-4">
    Sidebar
  </aside>
  
  <main class="bg-white p-4">
    Main content
  </main>
  
  <footer class="col-span-2 bg-slate-200 p-4">
    Footer
  </footer>
</div>

Named Areas (Alternative)

/* In CSS */
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
<div class="grid-container">
  <div class="grid-area-header">Header</div>
  <div class="grid-area-sidebar">Sidebar</div>
  <div class="grid-area-main">Main</div>
  <div class="grid-area-footer">Footer</div>
</div>

Common Grid Patterns

1. Equal Height Cards

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white p-6 rounded-lg shadow">Card 1<br>Taller content here</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 3</div>
</div>
<!-- All cards automatically same height -->

2. Masonry Layout

<div class="grid grid-cols-3 gap-4 auto-rows-max">
  <div class="row-span-2">Tall item</div>
  <div>Short item</div>
  <div>Short item</div>
  <div>Short item</div>
  <div class="row-span-2">Tall item</div>
</div>

3. Full-Width Container with Centered Content

<div class="grid grid-cols-[1fr_min(1200px,100%)_1fr]">
  <div class="col-start-2">
    Centered content, max 1200px
  </div>
</div>

4. Sidebar Layout

<div class="grid grid-cols-[250px_1fr] min-h-screen">
  <aside class="bg-slate-800 text-white p-4">
    Sidebar
  </aside>
  <main class="p-8">
    Main content
  </main>
</div>

5. Image Gallery

<div class="grid grid-cols-3 gap-2">
  <img src="1.jpg" class="col-span-2 row-span-2 object-cover">
  <img src="2.jpg" class="object-cover">
  <img src="3.jpg" class="object-cover">
  <img src="4.jpg" class="col-span-2 object-cover">
</div>

Flexbox vs Grid

Use CaseFlexboxGrid
1D layout (row OR column)✅ Best⚠️ Works
2D layout (rows AND columns)⚠️ Possible✅ Best
Distribute space in one direction✅ Best⚠️ Overkill
Align items✅ Best⚠️ Works
Overlap elements⚠️ Possible✅ Best
Source order independence⚠️ Limited✅ Best

Rule of thumb:

  • Flexbox: Components, navigation, 1D layouts
  • Grid: Page layouts, galleries, 2D layouts

Combining Flexbox & Grid

<!-- Grid for page layout, Flexbox for components -->
<div class="grid grid-cols-4 gap-4">
  <header class="col-span-4 flex justify-between items-center">
    <h1>Logo</h1>
    <nav class="flex gap-4">...</nav>
  </header>
  
  <aside class="col-span-1">Sidebar</aside>
  
  <main class="col-span-3">
    <div class="flex flex-wrap gap-4">
      <!-- Flexbox for card layout inside grid -->
      <div class="flex-1 min-w-64">Card 1</div>
      <div class="flex-1 min-w-64">Card 2</div>
    </div>
  </main>
</div>

Key Takeaways

  • Flexbox: 1D layouts, alignment, distribution of space
  • Grid: 2D layouts, precise placement, overlapping
  • flex-1: Grow and shrink; flex-none: fixed size
  • col-span-* / row-span-*: Control grid item size
  • gap-*: Consistent spacing (replaces margin hacks)
  • Combine them: Grid for macro layout, Flexbox for micro layout
Previous03 — Responsive Design & BreakpointsNext 05 — Components & Patterns