Tailwind CSS Grid Cheat Sheet: Classes & Examples

Tailwind CSS Grid is a set of utility classes for CSS Grid. Use it to define columns and rows, place items, set gaps and change a layout at different screen widths. This guide gives you the classes and code patterns you’re most likely to need, including custom column widths, 12-column layouts, subgrid and named grid areas.

The examples follow the current Tailwind CSS v4.3 documentation checked on 5 October 2026. If your project uses another version or custom theme values, check its installed version and configuration before copying a class.

Tailwind CSS Grid classes: quick reference

For a grid container, start with grid. Add classes to define its tracks, gaps and placement behaviour. Use the official grid columns, grid rows, column placement, row placement and auto-flow references for the full syntax.

 

Task	Useful classes	What they do
Turn on Grid	grid, inline-grid	Set the element to CSS Grid or inline CSS Grid.
Set explicit columns	grid-cols-1, grid-cols-3, grid-cols-12	Create the requested number of equal-width columns.
Set custom columns	grid-cols-[minmax(0,2fr)_minmax(0,1fr)]	Define custom tracks when equal columns are not suitable. Underscores in arbitrary values stand for spaces.
Set explicit rows	grid-rows-2, grid-rows-[auto_1fr_auto]	Define the grid’s row tracks.
Place or span items	col-span-2, col-start-2, row-span-2	Make an item span tracks or start/end at a grid line.
Size implicit tracks	auto-rows-min, auto-rows-fr, auto-cols-max	Set the size of rows or columns created automatically by the grid.
Control auto-placement	grid-flow-row, grid-flow-col, grid-flow-dense	Choose the direction in which the browser places items that have no explicit position.
Set gaps	gap-4, gap-x-6, gap-y-3	Set the space between both tracks, columns only or rows only.
Reuse parent tracks	grid-cols-subgrid, grid-rows-subgrid	Let a nested grid use the parent grid’s column or row tracks.

Build a responsive grid

Tailwind’s responsive variants are mobile-first. Classes without a breakpoint prefix apply at every screen size; a prefix such as sm: or lg: applies at that breakpoint and above. This example starts with one column, then adds columns as the viewport grows:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <article class="rounded-lg border p-4">First card</article>
  <article class="rounded-lg border p-4">Second card</article>
  <article class="rounded-lg border p-4">Third card</article>
</div>

The default Tailwind CSS v4.3 breakpoints are sm at 40rem (640px), md at 48rem (768px), lg at 64rem (1024px), xl at 80rem (1280px) and 2xl at 96rem (1536px). Projects can customise these values. For phone layouts, use the unprefixed class first; sm: means “at the small breakpoint and wider”, not “on small phones”. See Tailwind’s responsive design documentation.

Set columns and control their width

A class such as grid-cols-3 creates three equal tracks using Tailwind’s grid-column utility. It does not set the width of the whole grid; the container’s width comes from its parent or other width utilities.

<div class="grid grid-cols-3 gap-4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

For unequal columns, use an arbitrary track definition. This example gives the main column twice the flexible share of the second column, while minmax(0, ...) allows content to shrink within its track:

<div class="grid grid-cols-1 gap-6 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
  <main>Main content</main>
  <aside>Supporting content</aside>
</div>

In an arbitrary value, use underscores where CSS needs spaces. Tailwind converts them during compilation. For a reusable value, define a CSS custom property and use a class such as grid-cols-(--my-grid-cols). The documented shorthand expands to grid-cols-[var(--my-grid-cols)].

Create a 12-column layout

A 12-column grid is useful when sections need different widths. Start with a single-column layout for narrow screens, then apply column spans at a larger breakpoint:

<div class="grid grid-cols-1 gap-4 md:grid-cols-12">
  <main class="md:col-span-8">Main content</main>
  <aside class="md:col-span-4">Sidebar</aside>
</div>

Use col-span-2 to span two columns, col-span-full to span the full grid, or col-start-2 and col-end-5 to place an item between specific grid lines. The same idea applies to rows with row-span-2, row-start-2 and row-end-4.

Set row heights: explicit and automatic rows

grid-rows-3 defines three explicit row tracks. By contrast, auto-rows-* sets the size of implicit rows that the browser creates when items need more rows than the grid explicitly defines. They solve different problems; see the official auto-rows reference for the available utilities.

• grid-rows-none removes the explicit row track definition.
• grid-rows-subgrid makes a nested grid use its parent’s row tracks.
• auto-rows-auto sizes implicit rows from their contents.
• auto-rows-min and auto-rows-max use the min-content and max-content sizes.
• auto-rows-fr uses a flexible minmax(0, 1fr) track.
• auto-rows-[minmax(6rem,auto)] sets a custom minimum and lets the row grow for its content.

<div class="grid grid-cols-2 auto-rows-[minmax(6rem,auto)] gap-4">
  <div>A short item</div>
  <div>An item with more content that can make its row grow</div>
  <div>Another item</div>
</div>

For a fixed header, flexible main area and fixed footer, define explicit rows with grid-rows-[auto_1fr_auto]; make sure the grid container has a height or minimum height for the flexible track to use.

Choose how items flow through the grid

By default, Grid places items in rows. Use grid-flow-col when items should fill down columns instead. The dense variants can backfill earlier gaps; as the CSS Grid auto-placement documentation notes, that can make later items appear out of order visually. Check visual order against document and keyboard order before using dense placement in a content-heavy layout.

<div class="grid grid-flow-row-dense grid-cols-3 gap-4">
  <article class="col-span-2">Wide card</article>
  <article>Card</article>
  <article class="col-span-2">Another wide card</article>
  <article>Card</article>
</div>

Use grid-flow-row, grid-flow-col, grid-flow-dense, grid-flow-row-dense or grid-flow-col-dense to choose the placement behaviour. When a grid creates extra columns through column flow, utilities such as auto-cols-max or auto-cols-fr set their width.

Set gaps between grid items

gap-4 sets both row and column gaps using Tailwind’s spacing scale. It is not a universal number of pixels: the resulting value depends on the project’s spacing tokens. Use gap-x-* for column gaps and gap-y-* for row gaps.

<div class="grid grid-cols-2 gap-x-8 gap-y-4">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
  <div>Fourth</div>
</div>

You can also use a custom gap, for example gap-[10px], or a CSS variable with gap-(--my-gap). See the official Tailwind gap utilities.

Use CSS grid areas with Tailwind

Tailwind’s core grid utilities cover columns, rows, placement, auto-flow and gaps. For named CSS Grid areas, use arbitrary CSS properties or write a small custom CSS rule. The example below uses arbitrary properties: underscores become spaces in the grid-template-areas value.

<div class="grid grid-cols-1 gap-4 [grid-template-areas:'header'_'main'_'sidebar'_'footer'] md:grid-cols-[minmax(0,1fr)_16rem] md:[grid-template-areas:'header_header'_'main_sidebar'_'footer_footer']">
  <header class="[grid-area:header]">Header</header>
  <main class="[grid-area:main]">Main content</main>
  <aside class="[grid-area:sidebar]">Sidebar</aside>
  <footer class="[grid-area:footer]">Footer</footer>
</div>

The grid-area names in the template must match the names assigned to the children. If your build setup does not scan this HTML for class names, make sure the arbitrary classes are included in the files Tailwind scans. For a layout used in many places, a named CSS class may be easier for the team to maintain. See Tailwind’s guidance on arbitrary values and custom styles.

Use subgrid to align a nested layout

grid-cols-subgrid and grid-rows-subgrid let a nested grid adopt the corresponding tracks from its parent. The child must span the parent tracks it needs. Subgrid is useful when cards or page sections need their internal columns or rows to line up, even when their content differs.

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4 grid grid-cols-subgrid gap-4">
    <h2 class="col-span-1">Title</h2>
    <p class="col-span-3">Description aligned to the parent grid</p>
  </div>
</div>

Check browser support and your project’s Tailwind version if you need to support older environments. The official grid-template-columns reference includes a subgrid example.

Tailwind CSS Grid FAQs

How do I make a basic grid in Tailwind CSS?

Add grid to the container, then choose the number of columns with a class such as grid-cols-2 or grid-cols-3. Add gap-4 if you want space between the tracks.

How do I create a responsive Tailwind grid?

Set the narrow-screen layout first, then add breakpoint variants. For example, grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 starts with one column, uses two from the default sm breakpoint, and three from lg.

How do I set different column widths?

Use an arbitrary grid template, such as grid-cols-[minmax(0,2fr)_minmax(0,1fr)], or use a custom property with grid-cols-(--my-grid-cols). The arbitrary value form is useful for a one-off layout; a named CSS variable can be clearer when the same tracks are reused.

Does Tailwind CSS have a built-in grid-template-areas class?

The current core grid documentation does not list a named-area utility. Use arbitrary properties such as [grid-template-areas:'header_header'_'main_sidebar'] and [grid-area:main], or define the areas in your CSS.

What is the difference between grid-rows and auto-rows?

grid-rows-* defines explicit row tracks. auto-rows-* sets the size of implicit rows that the browser adds when the grid needs more rows than you defined.

Can I use Tailwind Play CDN on a live site?

The official Play CDN is intended for development and experiments, not production. For a live project, follow the official Tailwind installation guide for your framework or build tool.

For the CSS concepts behind these utilities, see the responsive design tutorials and HTML5 fundamentals on FallingBrick.