Display, positioning, and the smaller layout primitives — everything that isn't flexbox or grid (that's its own page) or spacing (also its own page).
Display
.joy-flex, .joy-flex-col, .joy-hidden, and .joy-block are already in Utilities. These fill in the rest:
Class
CSS
.joy-inline
display: inline
.joy-inline-block
display: inline-block
.joy-inline-flex
display: inline-flex
.joy-inline-grid
display: inline-grid
.joy-contents
display: contents
.joy-flow-root
display: flow-root
There's no bare .joy-grid utility for plain display: grid — that class name is already the card-grid component from Cards & layout. For a grid container, use .joy-grid-cols-* on Flexbox & grid, which sets display: grid itself.
overscroll-behavior — contain stops a scrolled panel (like a modal) from also scrolling the page behind it
Float & clear
Class
CSS
.joy-float-left/right/none
float
.joy-clear-left/right/both/none
clear
Isolation
.joy-isolate starts a new stacking context — handy for keeping a component's internal z-index values from leaking into the rest of the page without reaching for large numbers:
