CSS Components / Utilities / Width

Utilities: Width

CSS width override classes. Snippets below demonstrate utility styling.

Halves

.u-1/2
  
.u-2/2
 

Thirds

.u-1/3
  
.u-2/3
  
.u-3/3
 

Fourths

.u-1/4
  
.u-2/4
  
.u-3/4
  
.u-4/4
 

Fifths

.u-1/5
  
.u-2/5
  
.u-3/5
  
.u-4/5
  
.u-5/5
 

Sixths

.u-1/6
  
.u-2/6
  
.u-3/6
  
.u-4/6
  
.u-5/6
  
.u-6/6
 

Eighths

.u-1/8
  
.u-2/8
  
.u-3/8
  
.u-4/8
  
.u-5/8
  
.u-6/8
  
.u-7/8
  
.u-8/8
 

Twelfths

.u-1/12
  
.u-2/12
  
.u-3/12
  
.u-4/12
  
.u-5/12
  
.u-6/12
  
.u-7/12
  
.u-8/12
  
.u-9/12
  
.u-10/12
  
.u-11/12
  
.u-12/12
 

Twenty-fourths

.u-1/24
  
.u-2/24
  
.u-3/24
  
.u-4/24
  
.u-5/24
  
.u-6/24
  
.u-7/24
  
.u-8/24
  
.u-9/24
  
.u-10/24
  
.u-11/24
  
.u-12/24
  
.u-13/24
  
.u-14/24
  
.u-15/24
  
.u-16/24
  
.u-17/24
  
.u-18/24
  
.u-19/24
  
.u-20/24
  
.u-21/24
  
.u-22/24
  
.u-23/24
  
.u-24/24