📚 Lesson 1: What is Tailwind Grid?

What is Tailwind Grid?

Tailwind CSS Grid is a utility-first approach to CSS Grid that lets you build complex layouts directly in your HTML. Instead of writing custom CSS rules in a separate stylesheet, you apply pre-defined utility classes to your elements.

Think of it like building with LEGO blocks: each class is a small, reusable piece that does one thing well. Combine them together, and you can create any grid layout imaginable—all without leaving your HTML file.

Why Use Tailwind Grid?

1. Faster Development

No need to write custom CSS. Apply classes like grid, grid-cols-3, and gap-4 directly in your HTML and see results immediately in your browser.

2. No Naming Fatigue

Forget about thinking up class names like .blog-container or .card-grid. Tailwind's utility classes are standardized, descriptive, and immediately recognizable.

3. Built-in Responsive Design

Tailwind makes responsive grids incredibly easy with breakpoint prefixes like md:, lg:, and xl:. Change your grid layout on different screen sizes without writing a single media query!

4. Consistent Spacing

Tailwind uses a carefully designed spacing scale (0, 1, 2, 3, 4, 5, etc.) that ensures consistent gaps and padding throughout your design. No more guessing whether to use 16px or 18px—the scale does it for you.

The Tailwind Approach

Let's compare the same grid in pure CSS versus Tailwind to see the difference:

Pure CSS:

/* In your CSS file */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* In your HTML file */
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Tailwind:

<!-- Everything in one file -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Same result, less code, no switching between files! The layout is described right where you can see it.

The Basic Grid Classes

Every Tailwind Grid layout uses these core classes. Let's break them down:

1. Enable Grid

Class: grid
What it does: Turns the element into a grid container (equivalent to display: grid in CSS)

<div class="grid">
  <!-- grid items go here -->
</div>

2. Define Columns

Classes: grid-cols-1 through grid-cols-12
What it does: Sets how many equal-width columns your grid has

<!-- 3 equal columns -->
<div class="grid grid-cols-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

3. Add Gap (Spacing)

Classes: gap-0 through gap-96
What it does: Sets the space between grid items

<!-- Gap of 1rem (16px) -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Your First Tailwind Grid

Let's put it all together. Here's a complete example of a 3-column grid with styling:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 2</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 3</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 4</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 5</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 6</div>
</div>

Breaking it down:

• grid - Enables grid layout
• grid-cols-3 - Creates 3 equal columns
• gap-4 - Adds 1rem spacing between items
• bg-blue-500 - Blue background (styling, not grid-related)
• text-white - White text (styling, not grid-related)
• p-4 - Padding (styling, not grid-related)
• rounded - Rounded corners (styling, not grid-related)

Understanding the Class Names

Tailwind class names follow a logical pattern:

• grid-cols-{number} - Number of columns (1-12)
• gap-{size} - Gap size using Tailwind's spacing scale
• grid-rows-{number} - Number of rows (1-6)

Try It Yourself

The best way to learn Tailwind Grid is to use it! In the next lessons, you'll learn how to:

• Create responsive grids that adapt to screen size with breakpoint prefixes
• Span items across multiple columns using col-span classes
• Control rows and vertical spacing with row utilities
• Build real-world layouts like dashboards, card grids, and forms