📐 CSS relative units cheatsheet

This is a cheatsheet I wrote down when reviewing the available CSS units recommended for responsive design.

📏 Popular Relative Units

em

• Size is relative to the HTML tag (h1, p…) of the own element or the last parent element.
• Recommended for responsive or scalable elements.

rem

• Size is relative to the HTML tag of the root element (it doesn’t take into account the own element or last parent element).
• Default rem size is equivalent to 16px.
• Recommended for responsive or scalable elements.

ch

• It adjusts when users scale their text size.
• Used for line-length (max-inline-size) text property.

🖼️ Popular Viewport Relative Units

vw

• 1% of viewport’s width (visible browser window size).
• Suitable for responsive design.
• Handy for designs that depend on desktop large full width displays.

vh

• 1% of viewport’s height.
• Suitable for responsive design.
• Handy for mobile phone displays since it will take into account the height of the phone’s viewport in portrait and landscape view.

🧮 Grid Units

fr

• Describes a share of the available space in the grid container.
• Using different values for the fr unit will share the space in proportion.
• It works in a similar way to using flex: auto in flexbox. It distributes space after the items have been laid out.

Additional docs

CSS values and units - Learn web development | MDN

CSS Units