Flexbox & Grid

Flexbox Container

sz prop	Tailwind class	Preview
{ flex: true }	flex
{ inlineFlex: true }	inline-flex
{ flexDir: 'row' }	flex-row
{ flexDir: 'col' }	flex-col
{ flexDir: 'row-reverse' }	flex-row-reverse
{ flexDir: 'col-reverse' }	flex-col-reverse
{ flexWrap: 'wrap' }	flex-wrap
{ flexWrap: 'nowrap' }	flex-nowrap
{ flexWrap: 'wrap-reverse' }	flex-wrap-reverse

flex direction — row vs col

A

B

C

A

B

C

Alignment

sz prop	Tailwind class	Preview
{ items: 'start' }	items-start
{ items: 'center' }	items-center
{ items: 'end' }	items-end
{ items: 'stretch' }	items-stretch
{ items: 'baseline' }	items-baseline
{ justify: 'start' }	justify-start
{ justify: 'center' }	justify-center
{ justify: 'end' }	justify-end
{ justify: 'between' }	justify-between
{ justify: 'around' }	justify-around
{ justify: 'evenly' }	justify-evenly
{ alignContent: 'start' }	content-start
{ alignContent: 'center' }	content-center
{ alignContent: 'between' }	content-between

justify — start, center, end, between

start

B

center

B

end

B

between

B

Gap

sz prop	Tailwind class
{ gap: 4 }	gap-4
{ gapX: 4 }	gap-x-4
{ gapY: 2 }	gap-y-2
{ gap: 'px' }	gap-px
{ gap: '1.5rem' }	gap-[1.5rem]

gap scale — gap-1, gap-4, gap-8

A

B

C

gap-1

A

B

C

gap-4

A

B

C

gap-8

Flex Item

sz prop	Tailwind class
{ grow: true }	grow
{ grow: 0 }	grow-0
{ shrink: true }	shrink
{ shrink: 0 }	shrink-0
{ basis: '1/2' }	basis-1/2
{ basis: 0 }	basis-0
{ flex: '1' }	flex-1
{ flex: 'auto' }	flex-auto
{ flex: 'none' }	flex-none
{ self: 'center' }	self-center
{ self: 'start' }	self-start
{ order: 1 }	order-1
{ order: 'last' }	order-last

Grid Container

sz prop	Tailwind class	Preview
{ grid: true }	grid
{ inlineGrid: true }	inline-grid
{ gridCols: 3 }	grid-cols-3
{ gridCols: 'none' }	grid-cols-none
{ gridRows: 3 }	grid-rows-3
{ gridFlow: 'row' }	grid-flow-row
{ gridFlow: 'col' }	grid-flow-col
{ gridFlow: 'dense' }	grid-flow-dense
{ gridFlow: 'row-dense' }	grid-flow-row-dense
{ gridFlow: 'col-dense' }	grid-flow-col-dense
{ autoCols: 'auto' }	auto-cols-auto
{ autoCols: 'min' }	auto-cols-min
{ autoCols: 'fr' }	auto-cols-fr
{ autoRows: 'auto' }	auto-rows-auto
{ autoRows: 'fr' }	auto-rows-fr

{ grid: true, gridCols: 3, gap: 2 } — 3-column grid with 6 cells

1

2

3

4

5

6

Grid Item

sz prop	Tailwind class
{ colSpan: 2 }	col-span-2
{ colSpan: 'full' }	col-span-full
{ colStart: 1 }	col-start-1
{ colEnd: 4 }	col-end-4
{ rowSpan: 2 }	row-span-2
{ rowStart: 1 }	row-start-1
{ rowEnd: 3 }	row-end-3
{ justifySelf: 'center' }	justify-self-center
{ placeSelf: 'center' }	place-self-center
{ placeItems: 'center' }	place-items-center

{ colSpan: 2 } — wide cell spanning two columns

col-span-2

3

4

5

6

Examples

// Centered hero section
<div sz={{
  flex: true,
  items: 'center',
  justify: 'center',
  minH: 'screen',
}} />

// Responsive grid
<div sz={{
  grid: true,
  gridCols: 1,
  gap: 6,
  sm: { gridCols: 2 },
  lg: { gridCols: 3 },
}} />

// Navigation bar
<nav sz={{
  flex: true,
  items: 'center',
  justify: 'between',
  px: 6,
  py: 4,
}}>
  <div sz={{ flex: true, items: 'center', gap: 8 }}>
    <Logo />
    <Links />
  </div>
  <Actions />
</nav>

// Sidebar layout
<div sz={{ flex: true, gap: 8, minH: 'screen' }}>
  <aside sz={{ w: 64, shrink: 0 }} />
  <main sz={{ grow: true }} />
</div>