Size units
Fixed units
px: Pixel - Fixed size
Relative units
%: Percentage of the container size.
Em: An em represents the font size of the element calculated by the browser. The side length of the letters is used as a reference. This corresponds approximately to the dimensions of the capital letter "M". If the font size itself (font-size) is specified in em, the unit refers to the font size of the parent element.
rem: A rem (root-em) corresponds to the font size specified for the root element (in HTML, the html element). (Possible font size changes in parent elements can be skipped this way).
vh: (Viewport-Height) The unit vh corresponds to the 100th part of the height of the display area (viewport). So: 100vh = height of the viewport.
vw: (Viewport-Width) The unit vw corresponds to the 100th part of the width of the viewport. The following applies: 100vw = width of the viewport.
Flexible units
fr: Sets the size to a fraction of the remaining/available space to be filled.
auto: Sets the size to the minimum requirement of the available content. Perfect for height scaling of images.
min-content: The cells will be as large as the smallest content in the axis.
max-content: The cells will be as large as the largest content in the axis.
fit-content: The cells are scaled to fit the content.
minmax: Restricts the size between min and max. Two different units can be used, for example: "at least 200 px, but at most 50%".
Note: repeat is not supported
Bildschirm Haltepunkte
xs: extra-klein (Mobil)
sm: klein (Mobiles Querformat)
md: mittel (Tablet)
lg: groß (Tablet Querformat)
xl: extra-groß (Desktop)