New

Stable version of Uniform CSS now officially released! Release note

Ratio

Learn about the ratio special utility.


About Ratio

The ratio special utility applies percentage based padding in order to simulate various common screen aspect ratios.


Basic Usage

To apply ratio, assign the class ratio-<aspect-ratio> to any element.

Square 1:1
16:9
4:3
2:1
16:10
<div class="ratio-square">...</div>
<div class="ratio-16-9">...</div>
<div class="ratio-4-3">...</div>
<div class="ratio-2-1">...</div>
<div class="ratio-16-10">...</div>

Disabling Ratio

To disable this special utility, simply pass in ratioto the excludes setting in your configuration.

@use "uniform" as * with (
$config: (
excludes: (
ratio
)
)
);