Gap

Use gap utilities like gap-4 to control the gutter between rows and columns of flex and grid containers.

Basic example

Use gap-<number> utilities like gap-2 and gap-4 to set both row and column gaps in a single declaration.

Style('grid grid-cols-2 gap-4', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
])

Changing row and column gaps independently

Use gap-x-<number> and gap-y-<number> to control horizontal and vertical gaps independently.

Style('grid grid-cols-3 gap-x-8 gap-y-4', children: [
  Text('01'),
  Text('02'),
  Text('03'),
  Text('04'),
  Text('05'),
  Text('06'),
])

Class reference

Class	Description
gap-<number>	Sets both row and column gap from the spacing scale (0–128 → 0–512px)
gap-px	1px gap (sentinel)
gap-[<value>]	Arbitrary numeric pixel gap (e.g. gap-[10], gap-[20])
gap-x-<number>	Sets column gap only (between flex/grid items in main row)
gap-x-[<value>]	Arbitrary numeric column gap
gap-y-<number>	Sets row gap only (between wrapped rows or grid rows)
gap-y-[<value>]	Arbitrary numeric row gap

gap-(<custom-property>), gap-x-(<custom-property>), gap-y-(<custom-property>) are resolved against theme-defined StyleThemeData.customProperties — e.g. gap-(--my-gap) behaves like gap-[10] when the theme defines --my-gap: '10'. Cascade-inherited or JS-set CSS variables remain out of scope.

Parity omissions

• Non-numeric arbitrary values like gap-[10vw], gap-[2rem], gap-[clamp(...)] — ArbitraryValueResolver strips px/rem/em unit suffixes from numeric tokens but rejects viewport units, calc-expressions, and any other non-numeric form.