Sizing

Width

Utilities for sets the width of an element.


Class

classcss
w-autowidth: auto
w-fullwidth: 100%
w-screenwidth: 100vw
w-pxwidth: 1px
w-0width: 0
w-1width: 0.25rem
w-2width: 0.5rem
w-3width: 0.75rem
w-4width: 1rem
w-5width: 1.25rem
w-6width: 1.5rem
w-8width: 2rem
w-10width: 2.5rem
w-12width: 3rem
w-16width: 4rem
w-20width: 5rem
w-24width: 6rem
w-32width: 8rem
w-40width: 10rem
w-48width: 12rem
w-56width: 14rem
w-64width: 16rem
w-72 v1.1.3width: 18rem
w-80 v1.1.3width: 20rem
w-88 v1.1.3width: 22rem
w-96 v1.1.3width: 24rem
w-104 v1.1.326rem
w-112 v1.1.328rem
w-1/2width: 50%
w-1/3width: 33.333333%
w-2/3width: 66.666667%
w-1/4width: 25%
w-2/4width: 50%
w-3/4width: 75%
w-1/5width: 20%
w-2/5width: 40%
w-3/5width: 60%
w-4/5width: 80%
w-1/6width: 16.666667%
w-2/6width: 33.333333%
w-3/6width: 50%
w-4/6width: 66.666667%
w-5/6width: 83.333333%
w-1/12width: 8.333333%
w-2/12width: 16.666667%
w-3/12width: 25%
w-4/12width: 33.333333%
w-5/12width: 41.666667%
w-6/12width: 50%
w-7/12width: 58.333333%
w-8/12width: 66.666667%
w-9/12width: 75%
w-10/12width: 83.333333%
w-11/12width: 91.666667%

Usage

Set basic width to an element.

<!-- Example -->
<y class="w-4">
...
</y>

Set full width to an element.

<!-- Example -->
<y class="w-full">
...
</y>

Set full width in viewport screen to an element.

<!-- Example -->
<y class="w-screen">
...
</y>

Set 2-column width 1/2 to an element companion with flex utility (See Flex).

<!-- Example -->
<y class="flex">
<y class="w-1/2">
...
</y>
<y class="w-1/2">
...
</y>
</y>

Set 3-column width 1/3 to an element.

<!-- Example -->
<y class="flex">
<y class="w-1/3">
...
</y>
<y class="w-1/3">
...
</y>
<y class="w-1/3">
...
</y>
</y>

...mixed 3-column widths.

<!-- Example -->
<y class="flex">
<y class="w-2/3">
...
</y>
<y class="w-1/3">
...
</y>
</y>

Set 4-column width 1/4 to an element.

<!-- Example -->
<y class="flex">
<y class="w-1/4"> ... </y>
<y class="w-1/4"> ... </y>
<y class="w-1/4"> ... </y>
<y class="w-1/4"> ... </y>
</y>

...mixed 4-column widths.

<!-- Example -->
<y class="flex">
<y class="w-2/4"> ... </y>
<y class="w-3/4"> ... </y>
</y>

Set 5-column width 1/5 to an element.

<!-- Example -->
<y class="flex">
<y class="w-1/5"> ... </y>
<y class="w-1/5"> ... </y>
<y class="w-1/5"> ... </y>
<y class="w-1/5"> ... </y>
<y class="w-1/5"> ... </y>
</y>

...mixed 5-column widths.

<!-- Example -->
<y class="flex">
<y class="w-3/5"> ... </y>
<y class="w-2/5"> ... </y>
</y>

Set 6-column width 1/6 to an element.

<!-- Example -->
<y class="flex">
<y class="w-1/6"> ... </y>
<y class="w-1/6"> ... </y>
<y class="w-1/6"> ... </y>
<y class="w-1/6"> ... </y>
<y class="w-1/6"> ... </y>
<y class="w-1/6"> ... </y>
</y>

...mixed 6-column widths.

<!-- Example -->
<y class="flex">
<y class="w-4/6"> ... </y>
<y class="w-2/6"> ... </y>
</y>

Set 12-column width 1/12 to an element.

<!-- Example -->
<y class="flex">
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
<y class="w-1/12"> ... </y>
</y>

...mixed 12-column widths.

<!-- Example -->
<y class="flex">
<y class="w-4/12"> ... </y>
<y class="w-6/12"> ... </y>
<y class="w-2/12"> ... </y>
</y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'w',
//variant: 'responsive',
property: 'width',
modifier: (
'..': '...',
'..': '...'
...
)
)
)

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hoverYes
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled