Sizing

Width

Utilities for sets the width of an element.

Class

class	css
w-auto	width: auto
w-full	width: 100%
w-screen	width: 100vw
w-px	width: 1px
w-0	width: 0
w-1	width: 0.25rem
w-2	width: 0.5rem
w-3	width: 0.75rem
w-4	width: 1rem
w-5	width: 1.25rem
w-6	width: 1.5rem
w-8	width: 2rem
w-10	width: 2.5rem
w-12	width: 3rem
w-16	width: 4rem
w-20	width: 5rem
w-24	width: 6rem
w-32	width: 8rem
w-40	width: 10rem
w-48	width: 12rem
w-56	width: 14rem
w-64	width: 16rem
w-72 v1.1.3	width: 18rem
w-80 v1.1.3	width: 20rem
w-88 v1.1.3	width: 22rem
w-96 v1.1.3	width: 24rem
w-104 v1.1.3	26rem
w-112 v1.1.3	28rem
w-1/2	width: 50%
w-1/3	width: 33.333333%
w-2/3	width: 66.666667%
w-1/4	width: 25%
w-2/4	width: 50%
w-3/4	width: 75%
w-1/5	width: 20%
w-2/5	width: 40%
w-3/5	width: 60%
w-4/5	width: 80%
w-1/6	width: 16.666667%
w-2/6	width: 33.333333%
w-3/6	width: 50%
w-4/6	width: 66.666667%
w-5/6	width: 83.333333%
w-1/12	width: 8.333333%
w-2/12	width: 16.666667%
w-3/12	width: 25%
w-4/12	width: 33.333333%
w-5/12	width: 41.666667%
w-6/12	width: 50%
w-7/12	width: 58.333333%
w-8/12	width: 66.666667%
w-9/12	width: 75%
w-10/12	width: 83.333333%
w-11/12	width: 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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'w',
  $property: width,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  )
);

// Add Variants
@include yogurt(
  $class: 'w',
  $property: width,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  ),
  $variant: (
    'responsive',
    'hover'
    //...
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.