This guide covers placing items within a grid using Tailwind CSS, focusing on spanning and positioning.
Placing Grid Items: Spanning
After defining grid columns and rows (e.g., grid-cols-4, grid-rows-3), place items by making them span multiple columns or rows.
Spanning a Fixed Number of Columns
Use col-span-<number> to make an item span columns (e.g., col-span-2 spans two columns). This applies grid-column: span <number> / span <number>.
Use col-span-full to span all columns (grid-column: 1 / -1).
Spanning a Fixed Number of Rows
Use row-span-<number> to make an item span rows (e.g., row-span-2 spans two rows). This applies grid-row: span <number> / span <number>.
Use row-span-full to span all rows (grid-row: 1 / -1).
Spanning with Custom Values
For custom spanning, use col-span-[<value>] and row-span-[<value>]. Reference CSS variables with col-span-(<custom-property>) or row-span-(<custom-property>).
Placing Grid Items: Positioning
Position grid items by specifying their start or end grid lines.
Starting and Ending Columns
Use col-start-<number> to set the start column line (e.g., col-start-3). Use col-end-<number> for the end column line (e.g., col-end-5). These set grid-column-start and grid-column-end.
Use col-start-auto and col-end-auto for auto-placement.
Starting and Ending Rows
Use row-start-<number> for the start row line (e.g., row-start-2). Use row-end-<number> for the end row line (e.g., row-end-4). These set grid-row-start and grid-row-end.
Use row-start-auto and row-end-auto for auto-placement.
Using Negative Values for Positioning
Prefix positioning utilities with a dash for negative values (e.g., -col-start-2, -row-end-3). These translate to negative values for grid-column-start and grid-row-end.
Combining Spanning and Positioning
Combine start/end utilities with span utilities (e.g., col-start-2 col-span-3 starts at column line 2 and spans 3 columns).
Shorthand Positioning Utilities
Use col-<number> and row-<number> as shorthand. These set grid-column and grid-row to the specified grid line (e.g., col-3 starts at column line 3, ends at 4). Negative values are supported (e.g., -col-2).
Positioning with Custom Values
Use arbitrary values: col-start-[<value>], col-end-[<value>], row-start-[<value>], row-end-[<value>], col-[<value>], and row-[<value>]. Reference CSS variables with parentheses (e.g., row-start-(<custom-property>)).
Responsive Grid Item Placement
All grid placement utilities are responsive. Apply them conditionally at breakpoints (md:, lg:) or with container query variants (@md:).
Example: col-span-1 md:col-span-3.
Tailwind 4 allows container queries (@md:) for placement based on parent container size.
Customizing Grid Item Values
In Tailwind 4, define custom grid placement values using CSS variables with @theme. Reference these variables in arbitrary value syntax (e.g., col-span-(layout) if --grid-column-span-layout: 3 is defined).
Interaction with Auto-Placement
Explicit placement overrides default auto-placement. Unplaced items or those creating implicit tracks follow auto-placement rules. Control implicit track sizes with grid-auto-columns and grid-auto-rows, and flow with grid-auto-flow (e.g., grid-flow-row-dense).