Size

Percentage

Size utilities include percentage widths for 24 columns, with reduced fractions for all divisors of 24.

X must be an integer less than Y

Y can be 2, 3, 4, 6, 8, 12 or 24

  • u-sizeXofY
  • u-sizeFull for 100%
u-size1of3
u-size2of3
u-size5of24
u-size7of24
u-size12of24 or u-size1of2

Responsive

Sizing classes can be limited by media queries for responsive sizing:

  • u-xs-sizeXofY
  • u-sm-sizeXofY
  • u-md-sizeXofY
  • u-lg-sizeXofY
  • u-[xs, sm, md or lg]-sizeFull

(Pull screen wider and narrower to see sizes change)

Extra Small: 1/2
u-xs-size1of2

Extra Small: 1/2
u-xs-size1of2

Small: 1/3
u-sm-size1of3

Small: 1/3
u-sm-size1of3

Small: 1/3
u-sm-size1of3

Medium: 1/4
u-md-size1of4

Medium: 1/4
u-md-size1of4

Medium: 1/4
u-md-size1of4

Medium: 1/4
u-md-size1of4

Large: 1/6
u-lg-size1of6

Large: 1/6
u-lg-size1of6

Large: 1/6
u-lg-size1of6

Large: 1/6
u-lg-size1of6

Large: 1/6
u-lg-size1of6

Large: 1/6
u-lg-size1of6

Intrinsic

Size classes that either fit content or fill available space.

  • u-sizeFit makes an element shrink wrap its content.
  • u-sizeFill makes an element fill the remaining space.

u-sizeFit shrink-wraps content.

u-sizeFill fills remaining space.