Grid

Utilities for creating CSS Grid layouts. Define column templates, span items across columns and rows, and control placement. Use with the .grid display utility.

Class Reference

Grid Template Columns

Class	Property
`.grid-cols-1`	`grid-template-columns: repeat(1, minmax(0, 1fr))`
`.grid-cols-2`	`grid-template-columns: repeat(2, minmax(0, 1fr))`
`.grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr))`
`.grid-cols-4`	`grid-template-columns: repeat(4, minmax(0, 1fr))`
`.grid-cols-6`	`grid-template-columns: repeat(6, minmax(0, 1fr))`
`.grid-cols-12`	`grid-template-columns: repeat(12, minmax(0, 1fr))`

Column Span

Class	Property
`.col-auto`	`grid-column: auto`
`.col-span-1`	`grid-column: span 1 / span 1`
`.col-span-2`	`grid-column: span 2 / span 2`
`.col-span-3`	`grid-column: span 3 / span 3`
`.col-span-4`	`grid-column: span 4 / span 4`
`.col-span-full`	`grid-column: 1 / -1`

Row Span

Class	Property
`.row-span-2`	`grid-row: span 2 / span 2`
`.row-span-3`	`grid-row: span 3 / span 3`

Grid Flow

Class	Property
`.grid-flow-row`	`grid-auto-flow: row`
`.grid-flow-col`	`grid-auto-flow: column`

Place Items & Content

Class	Property
`.place-items-center`	`place-items: center`
`.place-content-center`	`place-content: center`

Examples

Three-Column Card Grid

A basic three-column grid with equal-width cards and gap spacing:

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 rounded-lg p-4">Card 1</div>
  <div class="bg-gray-100 rounded-lg p-4">Card 2</div>
  <div class="bg-gray-100 rounded-lg p-4">Card 3</div>
  <div class="bg-gray-100 rounded-lg p-4">Card 4</div>
  <div class="bg-gray-100 rounded-lg p-4">Card 5</div>
  <div class="bg-gray-100 rounded-lg p-4">Card 6</div>
</div>

Column Spanning

Use col-span-* to make items span multiple columns. The col-span-full class spans the entire row:

Header (col-span-full)

Content (col-span-3)

Side

Left (col-span-2)

Right (col-span-2)

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-full">Header</div>
  <div class="col-span-3">Content</div>
  <div>Sidebar</div>
  <div class="col-span-2">Left</div>
  <div class="col-span-2">Right</div>
</div>