lengths such as px or em, or a resolvable percentage
An intrinsic sizing function
auto, min-content, max-content, ﬁt-content
A ﬂexible sizing function
The fr unit
There are three types of sizing we need to consider. Fixed sizing, Intrinsic Sizing or ﬂexible.
Fixed sizing is something we are all familiar with, it’s how we’ve been doing layouts for years. Sizing things either as a length unit - be that pixels, ems or any other length.
Percentages also fall into this type of sizing, as long as they can be resolved against something, for example a grid track sized as 20% resolves to a length which is 20%
of the width of the grid container. Therefore when working out sizing resolvable percentages are treated in the same way as any other ﬁxed length - even though we
probably see them as ﬂexible in our heads.
Next we have intrinsic sizing, you might be most familiar with auto, but we also have the speciﬁc intrinsic sizing keywords of min-content, max-content and ﬁt-content.