1.7 KiB

layout, title, group
layout title group
docs Sizing utilities

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100% by default.

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Modify those values as you need to generate different utilities here.

{% example html %}

Width 25%
Width 50%
Width 75%
Width 100%
{% endexample %}

{% example html %}

Height 25%
Height 50%
Height 75%
Height 100%
{% endexample %}

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

{% example html %} Max-width 100% {% endexample %}

{% example html %}

Max-height 100%
{% endexample %}