Sizing utility CSS classes for width and height can be used to control the overall layout of elements.
This page covers sizing utilities including width percentage classes (rz-w-25/50/75/100), width keyword classes (fit-content/min-content/max-content/stretch), viewport width classes (rz-vw-100), min/max width classes, height percentage and viewport classes, min/max height classes, and responsive sizing with breakpoint support (rz-w-{breakpoint}-{size}).
You can use the predefined utility classes for width of 25%, 50%, 75%, 100%.
There are width keyword values exposed as CSS classes such as fit-content, min-content, max-content, and stretch.
These are viewport width values exposed as CSS classes.
Use these CSS classes to set desired minimum and maximum width class="rz-min-w-100".
| Width value | Width CSS class | Min-width CSS class | Max-width CSS class |
|---|---|---|---|
| 25% | .rz-w-25 | .rz-min-w-25 | .rz-max-w-25 |
| 50% | .rz-w-50 | .rz-min-w-50 | .rz-max-w-50 |
| 75% | .rz-w-75 | .rz-min-w-75 | .rz-max-w-75 |
| 100% | .rz-w-100 | .rz-min-w-100 | .rz-max-w-100 |
You can use the predefined utility classes for height of 25%, 50%, 75%, 100%.
These are viewport height values exposed as CSS classes.
Use these CSS classes to set desired minimum and maximum height class="rz-min-h-100".
| Height value | Height CSS class | Min-height CSS class | Max-height CSS class |
|---|---|---|---|
| 25% | .rz-h-25 | .rz-min-h-25 | .rz-max-h-25 |
| 50% | .rz-h-50 | .rz-min-h-50 | .rz-max-h-50 |
| 75% | .rz-h-75 | .rz-min-h-75 | .rz-max-h-75 |
| 100% | .rz-h-100 | .rz-min-h-100 | .rz-max-h-100 |
You can set a specific size value for different screen sizes by inserting the respective breakpoint abbreviation.
For example .rz-w-{breakpoint}-100, where {breakpoint} can be xs, sm, md, lg, xl, xx.
Learn more about Breakpoints.