Width

vel-src: sizing.css

Utilities for setting the width of an element.

Class	Properties
vel-w-0	width: 0px
vel-w-auto	width: auto
vel-w-full	width: 100%
vel-w-screen	width: 100vw
vel-w-min	width: min-content
vel-w-max	width: max-content
vel-w-fit	width: fit-content
vel-w-1	width: 0.25rem
vel-w-2	width: 0.5rem
vel-w-4	width: 1rem
vel-w-8	width: 2rem
vel-w-16	width: 4rem
vel-w-32	width: 8rem
vel-w-64	width: 16rem
vel-w-1/2	width: 50%
vel-w-1/3	width: 33.333%
vel-w-2/3	width: 66.667%
vel-w-1/4	width: 25%
vel-w-3/4	width: 75%

Examples

Width scale

w-1/4

w-1/2

w-3/4

w-full

example.html

<div class="vel-flex vel-flex-col vel-gap-2">
  <div class="vel-w-1/4" style="background:#7c5cfc;color:#fff;padding:8px;border-radius:6px;font-size:12px">w-1/4</div>
  <div class="vel-w-1/2" style="background:#7c5cfc;color:#fff;padding:8px;border-radius:6px;font-size:12px">w-1/2</div>
  <div class="vel-w-3/4" style="background:#7c5cfc;color:#fff;padding:8px;border-radius:6px;font-size:12px">w-3/4</div>
  <div class="vel-w-full" style="background:#7c5cfc;color:#fff;padding:8px;border-radius:6px;font-size:12px">w-full</div>
</div>