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 |
| em | 1.0em | A size relative to the parents font-size, this will force it to be this exact (calculated) pixel value |
| rem | 0.8rem | An size relative to the root html font-size, this will force it to be this exact (calculated) pixel 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, em, rem and auto space has been filled in. |