grid-auto-rows

Description
Syntax
Examples
Links

Description

The grid-auto-rows property for CSS specifies implicit grid tracks to hold a grid item positioned into a row that is not explicitly sized by grid-template-rows.

Syntax

CSS

grid-auto-rows: value;

JS

object.style.gridAutoRows = "value";

Values

<'grid-auto-rows'> = <track-size>+

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

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

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>

<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 (%).

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.

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

auto

Automatically specified by the user agent.

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

<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 (%).

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.

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>

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

<percentage>

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

Initial

auto

Examples

1 · auto

2 · fit-content

3 · flex

4 · length

5 · max-content

6 · min-content

7 · minmax

8 · percentage

9 · JS

<!doctype html>
<html>
<head>
    <style>
        .myclass
        {
            display: grid;
            grid-template-rows: 100px;
        }
        .myclass > div
        {
            background-image: linear-gradient(135deg, white, lightgray);
        }
        .myclass > div:not(:nth-of-type(1))
        {
            background-image: linear-gradient(135deg, white, yellow);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button value="fit-content(50px)">fit-content</button>
    <button value="1fr">flex</button>
    <button value="50px">length</button>
    <button>max-content</button>
    <button>min-content</button>
    <button value="minmax(50px, 1fr)">minmax</button>
    <button value="50%">percentage</button>
    <div class="myclass">
        <div>grid-auto-rows</div>
        <div>grid-auto-rows</div>
        <div>grid-auto-rows</div>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("div").style.gridAutoRows = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>