What track size values are available in CSS grid?

These values can be applied to grid-template-* properties:

1. Lengths (such as px or em).
2. Percentage values (%).
3. Fractional units or flex factor (fr): track size will expand and contract depending on available space. The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value
4. Minimum and maximum size range: using minmax() we can set up a range to which the track will be allowed to grow and shrink. The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()
5. Content-based size: the min-content, max-content, and auto values size the track based on the size of the content within it. The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word (https://developer.mozilla.org/en-US/docs/Web/CSS/min-content). The max-content sizing keyword represents the intrinsic maximum width of the content. For text content this means that the content will not wrap at all even if it causes overflows (https://developer.mozilla.org/en-US/docs/Web/CSS/max-content). Finally, auto will wrap items if there is not enough room.

If we want to size a track based on its content but we are unsure which keyword to use, start with auto.