Use the grid-cols-{n} utilities to create grids with n equally sized columns.

Use the col-span-{n} utilities to make an element span n columns.

Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

Use the grid-rows-{n} utilities to create grids with n equally sized rows.

Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

Use the row-span-{n} utilities to make an element span n rows.

Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.

Use the auto-cols-{size} utilities to control the size of implicitly-created grid columns.

Use the auto-rows-{size} utilities to control the size implicitly-created grid rows.

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:{class} to only apply the {class} utility on hover.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:{class} to apply the {class} utility at only medium screen sizes and above.