Defining Grid Columns

CSS Grid is a two-dimensional layout system that lets you place items in rows and columns simultaneously. Tailwind CSS provides utility classes that map directly to CSS Grid properties, so you never have to write display: grid or grid-template-columns by hand. You simply add the right class names to your HTML elements.

To turn an element into a grid container, apply the grid class. Without any column definition, all children stack into a single column by default. This is the starting point for any Tailwind Grid layout — every grid utility you add builds on top of the grid class.

Tailwind provides grid-cols-1 through grid-cols-12 to divide the container into equal-width columns. Under the hood, grid-cols-3 compiles to grid-template-columns: repeat(3, minmax(0, 1fr)). This means all columns share the available width equally, making it perfect for card grids and feature sections.

Different column counts suit different use cases. A 2-column grid works well for split-content sections, 3 columns for feature rows, and 4 or 6 columns for product or image galleries. Tailwind supports every integer from 1 to 12, giving you the same range as Bootstrap's grid system but without the row wrappers.

The 12-column grid is a classic design convention because 12 is divisible by 1, 2, 3, 4, and 6, giving you lots of layout flexibility. With Tailwind's grid-cols-12, each child occupies one column by default. You then use col-span-* on individual children to make them span multiple columns — which we will explore in the next lesson.

When the predefined 1–12 presets are not enough, use grid-cols-none to remove any column template, then define your own with grid-cols-[...] arbitrary values. The bracket notation lets you write any valid CSS grid-template-columns value directly inside a class name, giving you infinite flexibility without leaving HTML.

Modern browsers support the subgrid keyword, which lets a nested grid inherit its parent's column tracks. Tailwind v3.4+ includes grid-cols-subgrid for this purpose. Subgrid is powerful for aligning form labels inside card components that sit in a parent grid — each card's internal elements align with the overall grid lines.

The gap-* utilities add consistent spacing between grid cells. Use gap-4 for uniform spacing in both directions, gap-x-4 for horizontal-only gaps, and gap-y-6 for vertical-only gaps. Unlike margins, gap does not add extra space on the outside edges of the grid, keeping your layout clean and predictable.

In most real-world layouts you want fewer columns on small screens and more on larger ones. Tailwind's responsive prefixes make this trivial: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 stacks items on mobile, shows two columns on tablets, and four on desktops. This mobile-first approach means the unprefixed class is the baseline, and prefixed classes override it at larger breakpoints.

CSS Grid's auto-fill and auto-fit keywords create dynamic column counts based on available space. With Tailwind's arbitrary value syntax you can write grid-cols-[repeat(auto-fill,minmax(200px,1fr))] to automatically add columns as space allows. auto-fill keeps empty tracks, while auto-fit collapses them — both create truly fluid grids without media queries.

Putting it all together, here is a real feature section pattern used on marketing pages. Each feature card has an icon, heading, and description. The grid is grid-cols-1 sm:grid-cols-3 so it stacks on mobile and spreads into three columns on larger screens. Consistent padding and a subtle background create visual separation without borders.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: the grid class activates a CSS Grid container, grid-cols-1 through grid-cols-12 define equal-width column tracks, and responsive prefixes like md:grid-cols-3 switch column counts at breakpoints. Next up we explore how to make grid items span multiple columns and rows for complex layouts.