grid

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

fit-content()

Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).

<length-percentage> =
    <length> |
    <percentage>

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

<integer>

Specifies one or more decimal digits (0-9).

<line-names> = '[' <custom-ident>* ']'

<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

<integer>

Specifies one or more decimal digits (0-9).

<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )

<line-names> = '[' <custom-ident>* ']'

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

auto-fill

If the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, flooring the max track sizing function by the min track sizing function if both are definite, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

auto-fit

The same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.

<line-names> = '[' <custom-ident>* ']'

<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

fit-content()

Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).

<length-percentage> =
    <length> |
    <percentage>

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

<integer>

Specifies one or more decimal digits (0-9).

<line-names> = '[' <custom-ident>* ']'

<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

<integer>

Specifies one or more decimal digits (0-9).

<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )

<line-names> = '[' <custom-ident>* ']'

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

auto-fill

If the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, flooring the max track sizing function by the min track sizing function if both are definite, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

auto-fit

The same as auto-fill, except that after grid item placement any empty repeated tracks are collapsed.

<line-names> = '[' <custom-ident>* ']'

<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

auto

Automatically specified by the user agent.

<flex>

A non-negative dimension with the unit fr specifying the track's flex factor.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

auto

Automatically specified by the user agent.

<flex>

A non-negative dimension with the unit fr specifying the track's flex factor.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

fit-content()

Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).

<length-percentage> =
    <length> |
    <percentage>

<length-percentage> =
    <length> |
    <percentage>

auto

Automatically specified by the user agent.

<flex>

A non-negative dimension with the unit fr specifying the track's flex factor.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

auto

Automatically specified by the user agent.

<flex>

A non-negative dimension with the unit fr specifying the track's flex factor.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

fit-content()

Represents the formula max(minimum, min(limit, max-content)), where minimum represents an auto minimum (which is often, but not always, equal to a min-content minimum), and limit is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of minmax(auto, max-content) and minmax(auto, limit).

<length-percentage> =
    <length> |
    <percentage>

<length-percentage> =
    <length> |
    <percentage>

auto

Automatically specified by the user agent.

<flex>

A non-negative dimension with the unit fr specifying the track's flex factor.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

auto

Automatically specified by the user agent.

<length-percentage> =
    <length> |
    <percentage>

max-content

Represents the largest max-content contribution of the items occupying the track.

min-content

Represents the largest min-content contribution of the items occupying the track.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<custom-ident>

Specifies any valid identifier that is not misinterpreted as a keyword.

<fixed-breadth> = <length-percentage>

minmax(min, max)

Defines a size range greater than or equal to min and less than or equal to max.

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<inflexible-breadth> = <length-percentage> | min-content | max-content | auto