Tailwind CSS Grid | Interactive Documentation

Grid System Overview

Tailwind's grid system uses CSS Grid Layout to create responsive, complex layouts with a simple utility-based approach. The grid system makes it easy to create grids with different numbers of columns and rows, adjust spacing between items, and control the sizing and positioning of individual grid items.

Unlike traditional grid systems, Tailwind uses the power of CSS Grid directly, giving you more flexibility while maintaining the convenience of utility classes.

Key Grid Features

Define any number of columns and rows
Control column and row spanning
Create responsive grid layouts
Adjust gap spacing between grid items
Auto-placement or precise positioning

Grid Properties

Creating a Grid Container

Use the grid class to create a grid container and then add column and row utilities to define the structure.

class="grid grid-cols-3 grid-rows-2 gap-4"

Grid Item Placement

Control how items are placed in the grid with column and row span utilities.

class="col-span-2 row-span-2"

Grid Gaps

Adjust the spacing between grid items with gap utilities, which can be applied to rows, columns, or both.

class="gap-4 gap-x-6 gap-y-8"

Auto Grid

Create flexible, automatic grid layouts that adjust based on available space.

class="grid grid-cols-auto-fit gap-4"

Custom Grid Builder

Use this interactive tool to experiment with different grid configurations:

Columns

Rows

Gap

Items

Generated Code:

Grid vs Flexbox

While flexbox is designed for one-dimensional layouts (either rows OR columns), grid is designed for two-dimensional layouts (rows AND columns simultaneously).

Use grid when you need to control both rows and columns
Use flexbox for simpler one-directional layouts

Grid Template Columns

Control the number of columns in your grid with the grid-cols-{n} utilities, where n is the number of columns (1-12).

grid-cols-1

Column

grid-cols-3

grid-cols-6

Available column utilities:

grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 grid-cols-10 grid-cols-11 grid-cols-12 grid-cols-none

Column & Row Spanning

Use col-span-{n} and row-span-{n} utilities to make elements span multiple columns or rows.

col-span-2
row-span-2

col-span-3

col-span-2

Example code:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2 row-span-2">...</div>
  <div>...</div>
  <div>...</div>
  <div class="col-span-3">...</div>
  <div>...</div>
  <div class="col-span-2">...</div>
</div>

Auto Columns & Responsive Grid

Create responsive layouts that automatically adjust based on screen size or content.

Responsive Item

Example code:

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
  <div>Responsive Item</div>
  <div>Responsive Item</div>
  <div>Responsive Item</div>
  <div>Responsive Item</div>
</div>

Grid Areas Example

You can create complex layouts with named grid areas using custom CSS along with Tailwind.

Header Area

Sidebar

Main Content Area

Footer Area

Custom grid areas with CSS:

.grid-area-demo {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr;
}

.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-content { grid-area: content; }
.area-footer { grid-area: footer; }

Browser Support

CSS Grid is supported in all modern browsers. For older browser support, consider using a fallback layout or a polyfill.

Tailwind's grid utilities generate standard CSS Grid properties, providing excellent compatibility across browsers and devices.

Practical Usage Examples

Common Grid Patterns

Dashboard Layout

Header

Sidebar

Main Stats

Card 1

Card 2

Card 3

Code Example:

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4">Header</div>
  <div class="col-span-1 row-span-2">Sidebar</div>
  <div class="col-span-3">Main Stats</div>
  <div class="col-span-1">Card 1</div>
  <div class="col-span-1">Card 2</div>
  <div class="col-span-1">Card 3</div>
</div>

Photo Gallery

Code Example:

<div class="grid grid-cols-3 gap-2">
  <div class="aspect-square">Image 1</div>
  <div class="aspect-square">Image 2</div>
  <div class="aspect-square">Image 3</div>
  <div class="aspect-square">Image 4</div>
  <div class="col-span-2 aspect-video">
    Featured Image
  </div>
</div>

Card Grid with Auto-Fit

When used with custom configuration, you can create responsive card layouts that automatically adjust:

Card Title

Card content goes here with auto-fit behavior

Card Title

Card content goes here with auto-fit behavior

Card Title

Card content goes here with auto-fit behavior

Card Title

Card content goes here with auto-fit behavior

Standard responsive approach:

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div class="bg-white border rounded-lg shadow-sm p-4">Card 1</div>
  <div class="bg-white border rounded-lg shadow-sm p-4">Card 2</div>
  <div class="bg-white border rounded-lg shadow-sm p-4">Card 3</div>
  <div class="bg-white border rounded-lg shadow-sm p-4">Card 4</div>
</div>

Advanced Tip

For more advanced auto-sizing grids, extend your Tailwind config with custom grid utilities:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'auto-fill': 'repeat(auto-fill, minmax(200px, 1fr))',
        'auto-fit': 'repeat(auto-fit, minmax(200px, 1fr))',
      }
    }
  }
}

Then use them like: grid-cols-auto-fit

Grid Best Practices

Do

Use responsive prefixes (sm:, md:, lg:) for different layouts at different screen sizes
Combine with gap utilities for proper spacing
Use grid-flow-row-dense or grid-flow-col-dense to fill in empty cells efficiently
Create maintainable layouts by using consistent column spans

Don't

Overuse grid for simple one-directional layouts where flexbox would be simpler
Create overcomplicated grid structures that are hard to maintain
Forget about accessibility when reordering grid items
Neglect testing your grid layouts across different screen sizes

Customizing Grid Settings

You can extend Tailwind's grid configuration in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'sidebar': '200px minmax(0, 1fr)',
        'footer': '200px minmax(900px, 1fr) 100px',
      },
      gridTemplateRows: {
        'layout': 'auto 1fr auto',
      }
    }
  }
}

Summary & Key Takeaways

Grid Fundamentals

Tailwind makes CSS Grid accessible with simple utility classes
Choose between predefined column counts (1-12) or customize your own
Combine grid-cols-* with col-span-* for flexible layouts
Use gap-* utilities to control spacing between grid items

Grid Applications

Create complex, responsive layouts with minimal code
Build dashboards, galleries, and card layouts efficiently
Extend Tailwind with custom grid configurations when needed
Combine with other Tailwind utilities for complete design systems

Grid is one of the most powerful layout tools in CSS, and Tailwind makes it approachable with its utility-first approach. By understanding the grid system concepts in this guide, you can build complex, responsive layouts with minimal effort.