CSS gridrowstart Property (original) (raw)

CSS grid-row-start Property

Last Updated : 27 Aug, 2024

The grid-row-start property in CSS specifies the starting position of a grid item within a grid row by defining the inline start edge of its grid area.

**Syntax

grid-row-start: auto|span|row-line|initial|inherit;

**Default value: auto

**Property Values:

• **auto: It sets the grid-row-start property to its default value of one row.
• **span: It specifies the number of rows the item will span.
• **integer(row-line): It specifies the row on which the item starts.
• **initial: It sets the grid-row-start property to its default value.
• **inherit: The grid-row-start property is inherited from its parent.

**Note: Don’t initialize the height and width of the items of the container explicitly. If initialized, the span effect can’t be observed.

**Example 1: This example describes the container items without the grid-row-start property.

HTML `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }
</style>

`

**Output:

**Example 2: This example describes the grid-row-start property to auto.

html `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }

    .Geeks3 {
        grid-row-start: auto;
    }
</style>

`

**Output:

**Example 3: This example describes the grid-row-start property to span.

html `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }

    .Geeks3 {
        grid-row-start: span 2;
    }
</style>

`

**Output:

**Example 4: This example describes the grid-row-start property to the row line.

html `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }

    .Geeks3 {
        grid-row-start: 2;
    }
</style>

`

**Output:

**Example 5: This example describes the grid-row-start property to initial.

html `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }

    .Geeks3 {
        grid-row-start: initial;
    }
</style>

`

**Output:

**Example 6: This example describes the grid-row-start property to inherit.

html `

<style>
    .main {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
        background-color: green;

    }

    .GFG {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
    }

    .Geeks3 {
        grid-row-start: inherit;
    }
</style>

`

**Output:

The grid-row-start property in CSS provides precise control over the starting position of grid items within a grid row. By using various values such as auto, span, and specific row lines, developers can create flexible and responsive grid layouts that enhance the design and functionality of web pages.

**Supported Browsers: The browser supported by the _grid-row-start property are listed below

• Google Chrome 57.0
• Edge 16.0
• Firefox 52.0
• Safari 10.1
• Opera 44.0