Size

With this modifier you can determine the width and height of an element. You can use different units and change the properties for different breakpoints.

The structure of the class names are:

• width
  • .width-auto
  • .width-auto-{SCREEN_SIZE} until the screen size
  • .width-max-content
  • .width-max-content-{SCREEN_SIZE} until the screen size
  • .width-min-content
  • .width-min-content-{SCREEN_SIZE} until the screen size
  • .width-fit-content
  • .width-fit-content-{SCREEN_SIZE} until the screen size
  • .width-0
  • .width-0-{SCREEN_SIZE} until the screen size
  • .width-{SIZE}-{WIDTH_UNIT}
  • .width-{SIZE}-{WIDTH_UNIT}-{SCREEN_SIZE} until the screen size
• height
  • .height-auto
  • .height-auto-{SCREEN_SIZE} until the screen size
  • .height-max-content
  • .height-max-content-{SCREEN_SIZE} until the screen size
  • .height-min-content
  • .height-min-content-{SCREEN_SIZE} until the screen size
  • .height-fit-content
  • .height-fit-content-{SCREEN_SIZE} until the screen size
  • .height-0
  • .height-0-{SCREEN_SIZE} until the screen size
  • .height-{SIZE}-{HEIGHT_UNIT}
  • .height-{SIZE}-{HEIGHT_UNIT}-{SCREEN_SIZE} until the screen size

The values are:

• SIZE 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 99, 100, 125, 150, 175, 200
• WIDTH_UNIT %, vw, rem, em
• HEIGHT_UNIT %, vh, rem, em
• SCREEN_SIZE lg, md, sm, xs

Basic Example: