Layout Utilities
Utilities for controlling page layout, element display, positioning, and box model structure in NUICSS.
Display
Control the display property of elements:
| Class | Properties |
|---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: inline-flex; |
grid | display: grid; |
inline-grid | display: inline-grid; |
hidden | display: none; |
Position
Control element positioning in the DOM:
| Class | Properties |
|---|---|
static | position: static; |
fixed | position: fixed; |
absolute | position: absolute; |
relative | position: relative; |
sticky | position: sticky; |
Inset & Placement
| Class | Properties |
|---|---|
inset-0 | top: 0; right: 0; bottom: 0; left: 0; |
top-0 | top: 0; |
right-0 | right: 0; |
bottom-0 | bottom: 0; |
left-0 | left: 0; |
Z-Index
Stacking order utilities:
| Class | Properties |
|---|---|
z-0 | z-index: 0; |
z-10 | z-index: 10; |
z-20 | z-index: 20; |
z-30 | z-index: 30; |
z-40 | z-index: 40; |
z-50 | z-index: 50; |
z-auto | z-index: auto; |
Overflow
Control how content behaves when it exceeds its container:
| Class | Properties |
|---|---|
overflow-auto | overflow: auto; |
overflow-hidden | overflow: hidden; |
overflow-visible | overflow: visible; |
overflow-scroll | overflow: scroll; |
overflow-x-auto | overflow-x: auto; |
overflow-y-auto | overflow-y: auto; |