Grid Column

GridColumn is a column-span child for use inside Grid. It controls how many columns a cell occupies and optionally sets the starting column.

ExamplesCodeUsageChangelog

Spans

1

2

3

6

span 12 — full width

Tailwind v4

<Grid :cols="12" gap="md">
  <GridColumn :span="1">1</GridColumn>
  <GridColumn :span="2">2</GridColumn>
  <GridColumn :span="3">3</GridColumn>
  <GridColumn :span="6">6</GridColumn>
</Grid>

<Grid :cols="12" gap="md">
  <GridColumn :span="12">Full width</GridColumn>
</Grid>

With start position

Use start to place a column at a specific grid line.

start=1, span=4

start=9, span=4

Tailwind v4

<Grid :cols="12" gap="md">
  <!-- starts at col 1 -->
  <GridColumn :span="4" :start="1">Left</GridColumn>
  <!-- jumps to col 9, leaving a gap in the middle -->
  <GridColumn :span="4" :start="9">Right</GridColumn>
</Grid>

Props

Prop	Type	Default	Description
span	number	1	Number of columns to span
start	number	—	Optional grid-column-start value

Slots

Slot	Description
default	Cell content