Grid sizes

Explanation on how to define grid sizes.

A grid size is a definition of distance. To define grid sizes, the following grid size types can be used.

Type Example Behaviour
px 12px An absolute size in pixels, this will force it to be this exact value
% 10% A size relative to the size of it’s parent expressed as a percentage of the parent
auto auto A magic keyword to let the browser figure out what the size should be, this usually results in some value that mimicks other auto values in the same direction and makes sure the content fits, it can however vary strongly between browsers
fr 1fr A fraction of the total left over space in the parent. With left over is meant the space that is left after, %, px, and auto space has been filled in.