Graupl Logo

Width Utilities ​

The width utilities provide a set of classes to adjust the width, max-width, and min-width properties of elements.

Width ​

Class NamePropertyValue
.w-autowidthauto
.w-fit-contentwidthfit-content
.w-max-contentwidthmax-content
.w-min-contentwidthmin-content
.w-stretchwidthstretch
.w-fullwidth100%
.w-quarterwidth25%
.w-halfwidth50%
.w-three-quarterswidth75%
.w-thirdwidthcalc(100%/ 3)
.w-two-thirdswidthcalc(100%/ 1.5)
.w-half-screenwidth50vw
.w-third-screenwidthcalc(100vw/ 3)
.w-two-thirds-screenwidthcalc(100vw/ 1.5)
.w-quarter-screenwidth25vw
.w-three-quarters-screenwidth75vw
.w-full-screenwidth100vw
.w-0widthvar(--graupl-spacer-0)
.w-1widthvar(--graupl-spacer-1)
.w-2widthvar(--graupl-spacer-2)
.w-3widthvar(--graupl-spacer-3)
.w-4widthvar(--graupl-spacer-4)
.w-5widthvar(--graupl-spacer-5)
.w-6widthvar(--graupl-spacer-6)
.w-7widthvar(--graupl-spacer-7)
.w-8widthvar(--graupl-spacer-8)
.w-9widthvar(--graupl-spacer-9)
.w-10widthvar(--graupl-spacer-10)

Max Width ​

Class NamePropertyValue
.max-w-automax-widthauto
.max-w-fit-contentmax-widthfit-content
.max-w-max-contentmax-widthmax-content
.max-w-min-contentmax-widthmin-content
.max-w-stretchmax-widthstretch
.max-w-fullmax-width100%
.max-w-quartermax-width25%
.max-w-halfmax-width50%
.max-w-three-quartersmax-width75%
.max-w-thirdmax-widthcalc(100%/ 3)
.max-w-two-thirdsmax-widthcalc(100%/ 1.5)
.max-w-half-screenmax-width50vw
.max-w-third-screenmax-widthcalc(100vw/ 3)
.max-w-two-thirds-screenmax-widthcalc(100vw/ 1.5)
.max-w-quarter-screenmax-width25vw
.max-w-three-quarters-screenmax-width75vw
.max-w-full-screenmax-width100vw
.max-w-0max-widthvar(--graupl-spacer-0)
.max-w-1max-widthvar(--graupl-spacer-1)
.max-w-2max-widthvar(--graupl-spacer-2)
.max-w-3max-widthvar(--graupl-spacer-3)
.max-w-4max-widthvar(--graupl-spacer-4)
.max-w-5max-widthvar(--graupl-spacer-5)
.max-w-6max-widthvar(--graupl-spacer-6)
.max-w-7max-widthvar(--graupl-spacer-7)
.max-w-8max-widthvar(--graupl-spacer-8)
.max-w-9max-widthvar(--graupl-spacer-9)
.max-w-10max-widthvar(--graupl-spacer-10)

Min Width ​

Class NamePropertyValue
.min-w-automin-widthauto
.min-w-fit-contentmin-widthfit-content
.min-w-max-contentmin-widthmax-content
.min-w-min-contentmin-widthmin-content
.min-w-stretchmin-widthstretch
.min-w-fullmin-width100%
.min-w-quartermin-width25%
.min-w-halfmin-width50%
.min-w-three-quartersmin-width75%
.min-w-thirdmin-widthcalc(100%/ 3)
.min-w-two-thirdsmin-widthcalc(100%/ 1.5)
.min-w-half-screenmin-width50vw
.min-w-third-screenmin-widthcalc(100vw/ 3)
.min-w-two-thirds-screenmin-widthcalc(100vw/ 1.5)
.min-w-quarter-screenmin-width25vw
.min-w-three-quarters-screenmin-width75vw
.min-w-full-screenmin-width100vw
.min-w-0min-widthvar(--graupl-spacer-0)
.min-w-1min-widthvar(--graupl-spacer-1)
.min-w-2min-widthvar(--graupl-spacer-2)
.min-w-3min-widthvar(--graupl-spacer-3)
.min-w-4min-widthvar(--graupl-spacer-4)
.min-w-5min-widthvar(--graupl-spacer-5)
.min-w-6min-widthvar(--graupl-spacer-6)
.min-w-7min-widthvar(--graupl-spacer-7)
.min-w-8min-widthvar(--graupl-spacer-8)
.min-w-9min-widthvar(--graupl-spacer-9)
.min-w-10min-widthvar(--graupl-spacer-10)

Customization ​

To customize the alignment utilities, you can use the following variables.

VariableDescriptionDefault Value
$selector-baseBase selector for utility classes."."
$selector-prefixThe selector prefix for all utility classes.""
$selector-suffixThe selctor suffix for all utility classes.""
$selector-separatorThe selector separator for all utility classes.""
$use-importantAppends !important to generated utility declarations.true
$generate-base-utilitiesGenerates the base utility classes.true
$screen-awareEnables screen-aware utility variants.false
$theme-awareEnables theme-aware utility variants.false
$scheme-awareEnables scheme-aware utility variants.false
$state-awareEnables state-aware utility variants.false
$container-awareEnables container-aware utility variants.false
$screen-aware-selector-prefixPrefix to the screen-aware portion of utility selectors.""
$screen-aware-selector-suffixSuffix to the screen-aware portion of utility selectors.""
$screen-aware-selector-separatorSeparator inserted for screen-aware utility selectors."\\:"
$theme-aware-selector-prefixPrefix to the theme-aware portion of utility selectors.""
$theme-aware-selector-suffixSuffix to the theme-aware portion of utility selectors."-theme"
$theme-aware-selector-separatorSeparator inserted for theme-aware utility selectors."\\:"
$scheme-aware-selector-prefixPrefix to the scheme-aware portion of utility selectors.""
$scheme-aware-selector-suffixSuffix to the scheme-aware portion of utility selectors."-mode"
$scheme-aware-selector-separatorSeparator inserted for scheme-aware utility selectors."\\:"
$state-aware-selector-prefixPrefix to the state-aware portion of utility selectors.""
$state-aware-selector-suffixSuffix to the state-aware portion of utility selectors.""
$state-aware-selector-separatorSeparator inserted for state-aware utility selectors."\\:"
$container-aware-selector-prefixPrefix to the container-aware portion of utility selectors."cq\\:"
$container-aware-selector-suffixSuffix to the container-aware portion of utility selectors.""
$container-aware-selector-separatorSeparator inserted for container-aware utility selectors."\\:"
$utility-propertiesMap of utility properties.()
$utility-valuesMap of utility values.()
$utility-mapMap of utility property/value pairs.()

Responsive Variants ​

Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.

By default, no responsive utility classes are generated for width.

✏️ Note

For more information on responsive variants, refer to the Responsive utility classes documentation.