- Components
- Grid
Layout
Tailwind CSS Grid
Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system and dozens of predefined classes.
Specifying the columns in a grid
Use the grid-cols-{n} utilities to create grids with n equally sized columns.
See the Grid Template Columns for a complete list of grid options.
Spanning Columns
Use the col-span-{n} utilities to make an element span n columns.
Starting and ending lines
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.
Equal width
Every column width same size example.
See the Grid Column Start / End for a complete list of grid options.
Specifying the rows in a grid
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
See the Grid Template Rows for a complete list of grid options.
Starting and ending lines
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.
See the Grid Row Start / End for a complete list of grid options.
Controlling grid element placement
Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.
See the Grid Auto Flow for a complete list of grid options.
Setting the gap between elements
Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.
Changing row and column gaps independently
Use gap-x-{size} and gap-y-{size} to change the gap between rows and columns independently.
See the Gap for a complete list of grid options.
