Formsort recommends using a handful of the CSS length units when defining the dimensions of a component (margin, padding, font size, etc.)
Relative to the base font size. This allows responsiveness if there are differing base font sizes for different viewports.
Ex: 1.5rem of a base font size of 16px will be 24px (1.5 x 16 = 24).
Relative to 1% width of the viewport.
100vw = 100% width of the viewport.
Relative to 1% height of the viewport.
100vh = 100% height of the viewport.
Relative to the size of the parent element.
Setting 100% on a width property will allow that component to take 100% of the available space.
Pixel: 1px = 1/96th of 1in.
Pixels are unresponsive, so it is considered an absolute value.
If the content max width setting is 500px, it will be 500px regardless of changes in the viewport size (you can use dimension variables to create responsiveness, however)
Useful for setting an absolute value for a component, i.e. a base font size or the width/height of a component.