Lesson 9: Arbitrary Values | Gridlock Holmes

What are Arbitrary Values?

Sometimes Tailwind's predefined classes don't cover your exact needs. Maybe you need a grid with columns sized 200px 1fr 1fr, or a specific gap of 18px. That's where arbitrary values come in!

Arbitrary values let you use any CSS value directly in Tailwind classes using square bracket notation: [value]

💡 The Power of Flexibility:

Arbitrary values give you the flexibility of custom CSS while keeping the utility-first workflow. You stay in HTML, no separate stylesheet needed!

Arbitrary Grid Columns

Create any column configuration you want:

<!-- Sidebar + Main layout: 250px fixed, rest flexible -->
<div class="grid grid-cols-[250px_1fr] gap-4">
  <aside class="bg-gray-200 p-4">Fixed Sidebar (250px)</aside>
  <main class="bg-white p-4">Flexible Main Content</main>
</div>

<!-- Three columns: fixed, flexible, fixed -->
<div class="grid grid-cols-[200px_1fr_200px] gap-4">
  <div class="bg-blue-200 p-4">Left (200px)</div>
  <div class="bg-blue-300 p-4">Middle (flexible)</div>
  <div class="bg-blue-200 p-4">Right (200px)</div>
</div>

Arbitrary Grid Rows

Same concept for rows:

<!-- Header, content, footer layout -->
<div class="grid grid-rows-[auto_1fr_auto] h-screen">
  <header class="bg-blue-600 text-white p-4">Header</header>
  <main class="bg-gray-50 p-4 overflow-auto">Main Content</main>
  <footer class="bg-gray-800 text-white p-4">Footer</footer>
</div>

auto sizes header and footer to their content, 1fr gives all remaining space to main content.

Arbitrary Gap Values

Need a specific gap that's not in Tailwind's spacing scale?

<!-- 18px gap (not in default scale) -->
<div class="grid grid-cols-3 gap-[18px]">
  <div class="bg-green-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-green-500 p-4">Item 3</div>
</div>

<!-- Different horizontal and vertical gaps -->
<div class="grid grid-cols-3 gap-x-[24px] gap-y-[12px]">
  <div class="bg-purple-500 p-4">Item 1</div>
  <div class="bg-purple-500 p-4">Item 2</div>
  <div class="bg-purple-500 p-4">Item 3</div>
</div>

Complex Column Patterns

Use CSS Grid's powerful sizing functions:

<!-- minmax: column is at least 200px, max 1fr -->
<div class="grid grid-cols-[minmax(200px,1fr)_2fr] gap-4">
  <div class="bg-blue-500 p-4">Min 200px, Max 1fr</div>
  <div class="bg-blue-600 p-4">Takes 2fr</div>
</div>

<!-- repeat: 4 columns, each min 150px max 1fr -->
<div class="grid grid-cols-[repeat(4,minmax(150px,1fr))] gap-4">
  <div class="bg-green-500 p-4">1</div>
  <div class="bg-green-500 p-4">2</div>
  <div class="bg-green-500 p-4">3</div>
  <div class="bg-green-500 p-4">4</div>
</div>

⚠️ Syntax Note:

Use underscores _ instead of spaces in arbitrary values. grid-cols-[200px_1fr] not grid-cols-[200px 1fr]

Real-World Example: App Layout

A complete application layout with custom sizing:

<div class="grid grid-cols-[250px_1fr_300px] grid-rows-[60px_1fr] h-screen gap-0">
  <!-- Header spans all 3 columns -->
  <header class="col-span-3 bg-blue-600 text-white p-4 flex items-center">
    My Application
  </header>
  
  <!-- Left sidebar: fixed 250px -->
  <nav class="bg-gray-900 text-white p-6">
    <h2 class="text-xl font-bold mb-4">Menu</h2>
    <ul class="space-y-2">
      <li>Dashboard</li>
      <li>Analytics</li>
      <li>Settings</li>
    </ul>
  </nav>
  
  <!-- Main content: flexible -->
  <main class="bg-gray-50 p-6 overflow-auto">
    <h1 class="text-3xl font-bold mb-4">Dashboard</h1>
    <p>Main content area with flexible width</p>
  </main>
  
  <!-- Right panel: fixed 300px -->
  <aside class="bg-white border-l p-6 overflow-auto">
    <h3 class="font-bold mb-4">Activity</h3>
    <p class="text-sm text-gray-600">Recent updates...</p>
  </aside>
</div>

Breakdown:

grid-cols-[250px_1fr_300px] - Left sidebar 250px, center flexible, right panel 300px
grid-rows-[60px_1fr] - Header 60px, content fills remaining height
col-span-3 - Header spans all 3 columns

Auto-Fit Responsive Grid

Create a responsive grid that automatically fits columns:

<!-- Automatically fit as many 250px columns as possible -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <div class="bg-blue-500 text-white p-6 rounded">Card 1</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 2</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 3</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 4</div>
  <div class="bg-blue-500 text-white p-6 rounded">Card 5</div>
</div>

This creates as many columns as will fit, each at least 250px wide. As the screen resizes, columns automatically wrap to new rows. No media queries needed!

✅ Pro Tip:

repeat(auto-fit, minmax(Xpx, 1fr)) is one of the most powerful grid patterns. It creates truly responsive grids that adapt without breakpoints!

When to Use Arbitrary Values

Use them when:

You need specific pixel values not in Tailwind's scale
Building unique layouts that don't fit standard patterns
Combining fixed and flexible sizing (px with fr)
Using advanced CSS Grid functions (minmax, repeat, auto-fit)

Prefer standard classes when:

The predefined class exists (grid-cols-3 vs grid-cols-[repeat(3,1fr)])
Building standard responsive layouts
Working on a team (standard classes are more recognizable)

Congratulations!

You've completed the entire Tailwind Grid course! You now know:

✅ What Tailwind Grid is and why it's useful
✅ How to create responsive grids with breakpoints
✅ Gap and spacing utilities
✅ Column and row spanning
✅ Common real-world patterns
✅ Grid flow control
✅ Auto columns and rows
✅ Arbitrary values for custom layouts

You're now equipped to build any grid layout in Tailwind CSS. Practice these techniques in your projects, experiment with different patterns, and you'll master grid layouts in no time!

🎯 Lesson 9: Arbitrary Values