Sizing

Width

Utilities for sets the width of an element.

Class

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