Grid

States

Grid and Grid.Item are not interactive. By default they render a <div>; their state does not change with mouse, keyboard or touch.

State	Support	Visual change
Default	Yes	Equal-column grid; columns from columns, gap from gap
Hover	None	None; the element does not react to the pointer
Pressed	None	None; the element cannot be clicked
Focus	None	None; the element takes no focus and draws no focus ring
Disabled	None	None; it has no action to disable
Selected	None	None; it cannot be selected

Measurements

Grid has no fixed size of its own; the columns share the width of the container equally.

Property	Value	Token
Number of columns (columns)	1 to 12; default 1	-
Breakpoint: base	Below 1024 px	-
Breakpoint: md	1024 px and up (Tailwind lg:)	-
Breakpoint: lg	1440 px and up (min-[90rem]:)	-
Column and row gap (gap)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px; default lg	space-{name}
Cell width (span)	1 to 12 columns or full (whole row)	-

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Light mode	Dark mode
--bigbang-space-xs	4px4px4px	4px4px4px
--bigbang-space-sm	6px6px6px	6px6px6px
--bigbang-space-md	8px8px8px	8px8px8px
--bigbang-space-lg	12px12px12px	12px12px12px
--bigbang-space-xl	16px16px16px	16px16px16px
--bigbang-space-2xl	20px20px20px	20px20px20px
--bigbang-space-3xl	24px24px24px	24px24px24px
--bigbang-space-4xl	32px32px32px	32px32px32px

Motion and interaction

Interaction	Motion	Reduced motion
Hover, press, focus	None: Grid is not interactive	Nothing to reduce
Enter and exit	None: Grid uses no duration or easing token; content appears and leaves at once	Nothing to reduce
Layout change	None: the layout changes without a transition when the viewport width changes	Nothing to reduce

Grid uses no motion preset; the motion of its children belongs to their own components. For details, see the Motion page.