Flex & Grid

Direction

Class	CSS
chai-flex-row	flex-direction: row
chai-flex-row-reverse	flex-direction: row-reverse
chai-flex-col	flex-direction: column
chai-flex-col-reverse	flex-direction: column-reverse
chai-flex-wrap	flex-wrap: wrap
chai-flex-nowrap	flex-wrap: nowrap

Flex sizing

Class	CSS
chai-flex-1	flex: 1 1 0%
chai-flex-auto	flex: 1 1 auto
chai-flex-none	flex: none
chai-grow	flex-grow: 1
chai-grow-0	flex-grow: 0
chai-shrink	flex-shrink: 1
chai-shrink-0	flex-shrink: 0

Justify content

Class	CSS
chai-justify-start	justify-content: flex-start
chai-justify-end	justify-content: flex-end
chai-justify-center	justify-content: center
chai-justify-between	justify-content: space-between
chai-justify-around	justify-content: space-around
chai-justify-evenly	justify-content: space-evenly

Align items

Class	CSS
chai-items-start	align-items: flex-start
chai-items-end	align-items: flex-end
chai-items-center	align-items: center
chai-items-stretch	align-items: stretch
chai-items-baseline	align-items: baseline

Align content & self

chai-content-{start|end|center|between|around|evenly} → align-content. chai-self-{auto|start|end|center|stretch|baseline} → align-self.

Gap

Class	CSS
chai-gap-2	gap: 2px
chai-gap-x-4	column-gap: 4px
chai-gap-y-8	row-gap: 8px
chai-gap-[1rem]	gap: 1rem

Grid templates

Class	CSS
chai-grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr))
chai-grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr))
chai-col-span-2	grid-column: span 2 / span 2
chai-row-span-3	grid-row: span 3 / span 3

Example: a centered card row

<div class="chai-flex chai-justify-center chai-items-center chai-gap-4 chai-p-8">
  <div class="chai-p-4 chai-bg-cream-200 chai-rounded-lg">A</div>
  <div class="chai-p-4 chai-bg-cream-200 chai-rounded-lg">B</div>
  <div class="chai-p-4 chai-bg-cream-200 chai-rounded-lg">C</div>
</div>