CSS Grid Layout is a powerful two-dimensional layout system. Tailwind provides utilities for defining grid templates, controlling auto placement, and spanning items across columns and rows.

Control the number and size of grid columns:

• grid-cols-1 through grid-cols-12 – Fixed column count
• grid-cols-none – No grid columns
• grid-cols-subgrid – Subgrid (Tailwind v3.4+)
• Arbitrary: grid-cols-[200px_1fr]

Control how items span across columns:

• col-span-{n} – Span n columns (1–12, full)
• col-start-{n} – Start at column line n (1–13, auto)
• col-end-{n} – End at column line n (1–13, auto)

Control the number and size of grid rows:

• grid-rows-1 through grid-rows-6 – Fixed row count
• grid-rows-none – No explicit rows
• Arbitrary: grid-rows-[100px_1fr]

Control how items span across rows:

• row-span-{n} – Span n rows (1–6, full)
• row-start-{n} – Start at row line n (1–7, auto)
• row-end-{n} – End at row line n (1–7, auto)

Grid Auto Flow controls how auto-placed items fill the grid:

• grid-flow-row – Fill row by row (default)
• grid-flow-col – Fill column by column
• grid-flow-dense – Fill gaps with smaller items
• grid-flow-row-dense / grid-flow-col-dense

Grid Auto Columns – Size of implicitly created columns:

• auto-cols-auto, auto-cols-min, auto-cols-max, auto-cols-fr

Grid Auto Rows – Size of implicitly created rows:

• auto-rows-auto, auto-rows-min, auto-rows-max, auto-rows-fr