Span

Manage rows and columns by using the span class.

Manage rows and columns

Sometimes, we want a cell to cover more than one row or column, like CSS tables. Tailwind offers two ways to manage this:

  • span
  • start and end

Span

We use span to specify the number of columns or rows we want the cell to take up with .col-span-{count} or .row-span-{count}, where the suffix is the number of columns or rows. The default value is .col-span-1 or .row-span-1. The reset helpers are .col-span-auto and .row-span-auto.

The flow behavior continues. If we add a span to the first element, our four-cell example is this:

Get hands-on with 1200+ tech skills courses.