Tailwind CSS Grid Layout

Tailwind CSS includes a handy set of utilities for the CSS Grid layout model, allowing you to build complex two-dimensional structures with rows and columns.

While Flexbox is excellent for one-dimensional layouts, CSS Grid is designed to handle both columns and rows simultaneously. This makes CSS Grid the ideal tool for overall page layouts or complex dashboard interfaces. Tailwind's Grid utilities let you work with CSS Grid entirely from your HTML, without writing any custom CSS.

Grid Template Columns

To create a grid in Tailwind, add the grid utility class and define your columns with grid-cols-<n>. In Tailwind v4, the numeric scale is open-ended — you are not limited to a fixed set of values.

Class Property
grid-cols-<n> grid-template-columns: repeat(<n>, minmax(0, 1fr));.
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid; (lets a nested grid item adopt its parent's column tracks).
grid-cols-[<value>] Arbitrary value, e.g. grid-cols-[200px_1fr_100px] sets a fully custom grid-template-columns.
grid-cols-(<custom-property>) CSS variable shorthand, e.g. grid-cols-(--my-cols) resolves to grid-template-columns: var(--my-cols).

You can also define named column templates in your CSS using the @theme directive, which generates corresponding utility classes automatically:

This produces a grid-cols-layout utility class you can use directly in your HTML.

Grid Template Rows

Row utilities mirror the column utilities exactly. You can use grid-rows-<n> to define explicit rows, and combine with grid-flow-col when you want items to fill columns first.

Class Property
grid-rows-<n> grid-template-rows: repeat(<n>, minmax(0, 1fr));
grid-rows-none grid-template-rows: none;
grid-rows-subgrid grid-template-rows: subgrid;
grid-rows-[<value>] Arbitrary value, e.g. grid-rows-[auto_1fr_auto].
grid-rows-(<custom-property>) CSS variable shorthand, e.g. grid-rows-(--my-rows).

Column Spanning & Positioning

These utilities control how many columns an element spans and exactly which grid lines it starts or ends at. Note that CSS grid lines are 1-indexed. So in a 6-column grid, a full-width element starts at line 1 and ends at line 7.

Class Property Notes
col-span-<n> grid-column: span <n> / span <n>; Span n columns. Use col-span-full to span all columns.
col-start-<n> grid-column-start: <n>; Start at grid line n. Also accepts col-start-auto.
col-end-<n> grid-column-end: <n>; End at grid line n. Also accepts col-end-auto.
-col-start-<n> grid-column-start: calc(<n> * -1); Negative index counting from the end of the explicit grid.
col-[<value>] grid-column: <value>; Arbitrary shorthand for both start and end, e.g. col-[1_/_-1].

Row Spanning & Positioning

Row placement utilities work identically to their column counterparts.

Class Property Notes
row-span-<n> grid-row: span <n> / span <n>; Span n rows. Use row-span-full to span all rows.
row-start-<n> grid-row-start: <n>; Start at grid row line n. Also accepts row-start-auto.
row-end-<n> grid-row-end: <n>; End at grid row line n. Also accepts row-end-auto.
row-[<value>] grid-row: <value>; Arbitrary shorthand for both start and end.

Grid Auto Flow

Control the auto-placement algorithm. This is basically whether items fill in rows or columns first, and whether the browser should attempt to fill gaps with smaller items using dense packing.

Class Property
grid-flow-row grid-auto-flow: row; (fills rows firstt)
grid-flow-col grid-auto-flow: column; (fills columns first)
grid-flow-dense grid-auto-flow: dense;
grid-flow-row-dense grid-auto-flow: row dense;
grid-flow-col-dense grid-auto-flow: column dense;

Grid Auto Columns & Rows

When grid items are placed outside the explicitly defined tracks (e.g. by spanning beyond grid-cols-<n>, or via grid-flow-col), the browser creates implicit tracks. These utilities control how large those implicit tracks should be.

Class Property
auto-cols-auto grid-auto-columns: auto;
auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-auto-columns: minmax(0, 1fr);
auto-cols-[<value>] Arbitrary value, e.g. auto-cols-[minmax(0,2fr)].
auto-rows-auto grid-auto-rows: auto;
auto-rows-min grid-auto-rows: min-content;
auto-rows-max grid-auto-rows: max-content;
auto-rows-fr grid-auto-rows: minmax(0, 1fr);
auto-rows-[<value>] Arbitrary value, e.g. auto-rows-[minmax(0,2fr)].

Both auto-cols-* and auto-rows-* also support the CSS variable shorthand syntax, e.g. auto-cols-(--my-col-size).

Gap

Use gap-<n> to control the spacing between both rows and columns simultaneously. You can also set them independently with gap-x-<n> (column gap) and gap-y-<n> (row gap). In Tailwind, gap values are derived from the spacing scale variable (--spacing), so any number works out of the box (you're not limited to a predefined list).

Class Property
gap-<n> gap: calc(var(--spacing) * <n>);
gap-x-<n> column-gap: calc(var(--spacing) * <n>);
gap-y-<n> row-gap: calc(var(--spacing) * <n>);
gap-[<value>] Arbitrary value, e.g. gap-[1.5rem].
gap-(<custom-property>) CSS variable shorthand, e.g. gap-(--my-gap).

Responsive Grids

All grid utilities can be prefixed with any of Tailwind's breakpoint variants to apply them only at certain screen sizes. This is the standard approach for building responsive layouts without writing any media queries by hand.

From Tailwind v4 onwards, container query variants (@sm:, @md:, etc.) are also supported out of the box, so you can change grid structure based on the size of a container rather than the viewport.

Example

View Output

In the next page, we'll cover Spacing, which is one of the most frequently used utility categories in Tailwind.