Layout
Panda provides style properties for styling layout of an element
Panda provides style properties for styling layout of an element.
Aspect Ratio
Use the aspectRatio utilities to set the desired aspect ratio of an element.
Values can reference the aspectRatios token category.
<div className={css({ aspectRatio: 'square' })} />This uses the native CSS property aspect-ratio which is might not supported in all browsers. Consider using the
AspectRatio pattern instead
Position
Use the position utilities to set the position of an element.
<div className={css({ position: 'absolute' })} />
<div className={css({ pos: 'absolute' })} /> // shorthandTop / Right / Bottom / Left
Use the top, right, bottom and left utilities to set the position of an element.
Values can reference the spacing token category.
<div className={css({ position: 'absolute', top: '0', left: '0' })} />| Prop | CSS Property | Token Category |
|---|---|---|
top | top | spacing |
right | right | spacing |
bottom | bottom | spacing |
left | left | spacing |
Logical Properties
Use the inset{Start|End} utilities to set the position of an element based on the writing mode.
For example, insetStart will set the left property in ltr mode and right in rtl mode.
<div className={css({ position: 'absolute', insetStart: '0' })} />| Prop | CSS Property | Token Category |
|---|---|---|
start, insetStart, insetInlineStart | inset-inline-start | spacing |
end , insetEnd, insetInlineEnd | inset-inline-end | spacing |
insetX, insetInline | inset-inline | spacing |
insetY, insetBlock | inset-inline | spacing |
Container Query
You can define container names and sizes in your theme configuration and use them in your styles. Read more.
| Prop | CSS Property | Token Category |
|---|---|---|
containerName | containerName | containerNames |
Full reference
Generated from @pandacss/preset-base, so this table always matches the utilities Panda ships.
| Property | Shorthand | Class | Values |
|---|---|---|---|
| container | — | cq | — |
| containerName | — | cq-n | containerNames |
| containerType | — | cq-t | — |
| Property | Shorthand | Class | Values |
|---|---|---|---|
| aspectRatio | — | asp | aspectRatios |
| boxDecorationBreak | — | bx-db | — |
| objectFit | — | obj-f | — |
| objectPosition | — | obj-p | — |
| Property | Shorthand | Class | Values |
|---|---|---|---|
| bottom | — | bottom | spacing |
| float | — | float | start | end |
| inset | — | inset | spacing | auto |
| insetBlock | insetY | inset-y | spacing |
| insetBlockEnd | — | inset-be | spacing |
| insetBlockStart | — | inset-bs | spacing |
| insetInline | insetX | inset-x | spacing |
| insetInlineEnd | insetEnd, end | inset-e | spacing |
| insetInlineStart | insetStart, start | inset-s | spacing |
| left | — | left | spacing |
| position | pos | pos | — |
| right | — | right | spacing |
| top | — | top | spacing |