Grid Guide

Grid in Tailwind CSS

CSS Grid is a powerful two-dimensional layout system ideal for creating complex page layouts and component designs.

Basic Grid

Create a grid container and define columns using grid-template-columns.

Quick Explanation

Grid lets you create layouts in rows AND columns, like a spreadsheet. You can define exactly how many columns you want, and items will automatically flow into the grid cells.

Default Grid (Single Column)

By default, grid items are placed in a single column.

Demo

Code

<div className="gridCreates a grid container with default single column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Three-Column Grid

Items are arranged in three equal-width columns.

Demo

Code

<div className="grid grid-cols-3Creates a grid with 3 equal-width columns">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Four-Column Grid

Items are arranged in four equal-width columns.

Demo

Code

<div className="grid grid-cols-4Creates a grid with 4 equal-width columns">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Grid Gap

Control the spacing between grid items using gap utilities.

Quick Explanation

Gaps are the spaces between grid items - like the gutters between sections in a newspaper. You can set different gap sizes and even have different spacing horizontally vs. vertically.

Small Gap (gap-2)

Add a small gap (0.5rem) between grid items.

Demo

Code

<div className="grid grid-cols-3 gap-2Adds 0.5rem (8px) of space between all grid items">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- More items -->
</div>

Medium Gap (gap-4)

Add a medium gap (1rem) between grid items.

Demo

Code

<div className="grid grid-cols-3 gap-4Adds 1rem (16px) of space between all grid items">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- More items -->
</div>

Different Horizontal and Vertical Gaps

Set different spacing for rows and columns.

Demo

Code

<div className="grid grid-cols-3 gap-x-8Adds 2rem (32px) of horizontal space between columns gap-y-2Adds 0.5rem (8px) of vertical space between rows">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- More items -->
</div>

Spanning Columns and Rows

Make items span multiple columns or rows for more complex layouts.

Quick Explanation

Grid items can span across multiple columns or rows, like merged cells in a spreadsheet. This lets you create interesting layouts with differently-sized areas.

Column Spanning

Items can span multiple columns to create wider elements.

Demo

col-span-2

col-span-3

Code

<div className="grid grid-cols-3">
  <div className="col-span-2Item takes up 2 columns instead of 1">Spans 2 columns</div>
  <div>Regular cell</div>
  <div>Regular cell</div>
  <div className="col-span-3Item spans across all 3 columns (full width)">Spans all 3 columns</div>
</div>

Row Spanning

Items can span multiple rows to create taller elements.

Demo

row-span-2

Code

<div className="grid grid-cols-3 grid-rows-3Explicitly defines 3 rows in the grid">
  <div className="row-span-2Item takes up 2 rows vertically instead of 1">Spans 2 rows</div>
  <div>Regular cell</div>
  <div>Regular cell</div>
  <!-- More items -->
  <div className="row-span-2Item takes up 2 rows vertically instead of 1">Spans 2 rows</div>
</div>

Combined Spanning

Items can span both columns and rows to create larger block elements.

Demo

col-span-2 row-span-2

Code

<div className="grid grid-cols-4 grid-rows-2">
  <div className="col-span-2 row-span-2Item takes up a 2×2 area in the grid">Spans 2×2</div>
  <div>Regular cell</div>
  <div>Regular cell</div>
  <!-- More items -->
</div>

Custom Grid Templates

Create custom grid layouts with specific column widths.

Quick Explanation

Sometimes you need very specific column sizes - like a fixed sidebar with a flexible main area. Custom grid templates let you define exactly how wide or tall each column or row should be.

Fixed, Flexible, and Proportional Columns

Mix fixed width, flexible (fr), and proportional columns.

Demo

200px

1fr

2fr

Code

<div className="grid grid-cols-[200px_1fr_2fr]Creates 3 columns: 1st is fixed 200px, 2nd is flexible, 3rd is twice as wide as the 2nd">
  <div>Fixed 200px width</div>
  <div>Flexible 1fr width</div>
  <div>Flexible 2fr width</div>
</div>

Equal Columns with Fixed End Column

Create a layout with equal flexible columns plus one fixed-width column.

Demo

1fr

200px

Code

<div className="grid grid-cols-[repeat(2,_minmax(0,_1fr))_200px]Creates 2 equal flexible columns followed by a 200px fixed column">
  <div>Flexible 1fr width</div>
  <div>Flexible 1fr width</div>
  <div>Fixed 200px width</div>
</div>

Fixed Header, Flexible Content, Fixed Footer

Create a classic page layout with fixed height header and footer.

Demo

Header 100px

Auto-sized content

Footer 100px

Code

<div className="grid grid-rows-[100px_auto_100px]Creates a row for header (100px), content (auto height), and footer (100px) h-80">
  <div>Fixed 100px height header</div>
  <div>Auto-sized content area</div>
  <div>Fixed 100px height footer</div>
</div>

Grid Auto Flow

Control how auto-placed items flow into the grid.

Quick Explanation

Grid auto flow controls the direction items flow into the grid, and whether the grid should try to fill in gaps. It's like choosing between filling a bookshelf row by row or column by column.

Row Flow (Default)

Items flow horizontally, then move to the next row when a row is filled.

Demo

col-span-2

Code

<div className="grid grid-cols-4 grid-flow-rowItems flow horizontally across rows (this is the default behavior)">
  <div className="col-span-2">Spans 2 columns</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div className="col-span-2">Spans 2 columns</div>
  <div>Item</div>
</div>

Dense Row Flow

Items flow by row, but the grid tries to fill in all empty spaces when possible.

Demo

col-span-2

Code

<div className="grid grid-cols-4 grid-flow-row-denseItems flow by row, but will fill any gaps if they fit">
  <div className="col-span-2">Spans 2 columns</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div className="col-span-2">Spans 2 columns</div>
  <div>Item</div>
</div>

Column Flow

Items flow vertically, filling columns first before moving to the next column.

Demo

row-span-2

Code

<div className="grid grid-rows-3 grid-flow-colItems flow vertically down columns instead of across rows">
  <div className="row-span-2">Spans 2 rows</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div className="row-span-2">Spans 2 rows</div>
  <div>Item</div>
</div>

Grid Alignment

Control the alignment of items within their grid cells.

Quick Explanation

Grid alignment lets you control how items are positioned inside their grid cells. Think of each cell as a picture frame - you can position the picture in the center, at the top, at the bottom, etc.

Justify Items (Horizontal Alignment)

Control the horizontal alignment of items within their grid cells.

Demo

start

center

Code

<div className="grid grid-cols-2 justify-items-startAligns grid items to the left side of their cell">
  <div>Start-aligned item</div>
  <div>Start-aligned item</div>
  <!-- More items -->
</div>

<div className="grid grid-cols-2 justify-items-centerCenters grid items horizontally in their cell">
  <div>Center-aligned item</div>
  <div>Center-aligned item</div>
  <!-- More items -->
</div>

Align Items (Vertical Alignment)

Control the vertical alignment of items within their grid cells.

Demo

start

center

Code

<div className="grid grid-cols-2 items-startAligns grid items to the top of their cell h-32">
  <div>Top-aligned item</div>
  <div>Top-aligned item</div>
  <!-- More items -->
</div>

<div className="grid grid-cols-2 items-centerCenters grid items vertically in their cell h-32">
  <div>Center-aligned item</div>
  <div>Center-aligned item</div>
  <!-- More items -->
</div>

Responsive Grid

Create responsive layouts by changing grid properties at different breakpoints.

Quick Explanation

Responsive grids let you change your layout based on screen size. It's like having a room with furniture that rearranges itself when the room gets smaller or larger.

Responsive Column Count

Change the number of columns based on screen size.

Demo

Code

<div className="grid grid-cols-1Single column on mobile devices sm:grid-cols-2Two columns on small screens (640px+) md:grid-cols-3Three columns on medium screens (768px+) lg:grid-cols-4Four columns on large screens (1024px+)">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- More items -->
</div>

Responsive Column Spanning

Change how items span across columns at different screen sizes.

Demo

col-span-6 md:col-span-4 lg:col-span-3

col-span-6 md:col-span-8 lg:col-span-9

col-span-3 md:col-span-6

Code

<div className="grid grid-cols-6 md:grid-cols-126 columns on mobile, 12 on medium screens and up">
  <div className="col-span-6 md:col-span-4 lg:col-span-3Full width on mobile, 1/3 width on medium, 1/4 width on large screens">Item A</div>
  <div className="col-span-6 md:col-span-8 lg:col-span-9">Item B</div>
  <div className="col-span-3 md:col-span-6">Item C</div>
  <div className="col-span-3 md:col-span-6">Item D</div>
</div>

Common Grid Layouts

Examples of typical layouts built with Grid.

Quick Explanation

These are real-world grid layouts that you'll see frequently. They show how the grid properties come together to create usable, responsive designs.

Holy Grail Layout

A classic web layout with header, footer, main content, and sidebars.

Demo

Header

Sidebar

Main Content

Aside

Footer

Code

<div className="grid grid-cols-1 md:grid-cols-[100px_1fr_100px] grid-rows-[auto_1fr_auto]Three rows: auto-sized header, flexible content area, auto-sized footer min-h-screen">
  <header className="col-span-fullMakes header and footer span across all columns">Header</header>
  <nav>Sidebar</nav>
  <main>Main Content</main>
  <aside>Aside</aside>
  <footer className="col-span-fullMakes header and footer span across all columns">Footer</footer>
</div>

Dashboard Layout

A responsive layout for dashboards with a main section and various widgets.

Demo

Main Content

Sidebar

Card 1

Card 2

Card 3

Code

<div className="grid grid-cols-1212-column grid for flexible layouts gap-4">
  <div className="col-span-12 md:col-span-8Full width on mobile, 2/3 width on desktop">Main Content</div>
  <div className="col-span-12 md:col-span-4Full width on mobile, 1/3 width on desktop">Sidebar</div>
  <div className="col-span-12 md:col-span-4Full width on mobile, 1/3 width on desktop">Card 1</div>
  <div className="col-span-12 md:col-span-4Full width on mobile, 1/3 width on desktop">Card 2</div>
  <div className="col-span-12 md:col-span-4Full width on mobile, 1/3 width on desktop">Card 3</div>
</div>

Image Gallery

A responsive grid for displaying images or cards in a gallery format.

Demo

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Code

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-42 columns on mobile, 3 on tablets, 4 on desktop gap-4">
  <div>Image 1</div>
  <div>Image 2</div>
  <!-- More images -->
</div>