CSS grid-row Property

Last Updated : 27 Aug, 2024

The grid-row property in CSS is used to define the size and position of a grid item within a grid layout. It combines the grid-row-start and grid-row-end properties to specify the item’s start and end positions along the row axis.

Syntax:

grid-row: grid-row-start|grid-row-end;

Property Values

1. grid-row-start:

Specifies the row line where the item will start.

Example:

html

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }

        .GFG {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }

        .Geeks1 {
            grid-row-start: 3;
        }
    </style>
</head>

<body>
    <h3>grid-row-start Property</h3>

    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
        <div class="Geeks6 GFG">6</div>
        <div class="Geeks7 GFG">7</div>
        <div class="Geeks8 GFG">8</div>
    </div>
</body>
  
</html>

Output:

2. grid-row-end:

Specifies the row line where the item will end or how many rows the item will span.

Example:

html

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }

        .GFG {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }

        .Geeks1 {
            grid-row-start: 3;
        }
    </style>
</head>

<body>

    <h3>grid-row-start Property</h3>

    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
        <div class="Geeks6 GFG">6</div>
        <div class="Geeks7 GFG">7</div>
        <div class="Geeks8 GFG">8</div>
    </div>
</body>
  
</html>

Output:

The grid-row property in CSS provides precise control over grid item placement along the row axis, enhancing the flexibility and responsiveness of web layouts. By using this property, developers can create complex, adaptive grid structures that improve user experience across various devices.

Supported Browsers: The browser supported by grid-row property are listed below:

Google Chrome 57.0 and above
Edge 16.0 and above
Firefox 52.0 and above
Safari 10.1 and above
Opera 44.0 and above

CSS grid-row-end Property

kundankumarjha

Improve

Article Tags :

CSS grid-row Property

Syntax:

Property Values

1. grid-row-start:

2. grid-row-end:

Similar Reads

Thank You!

What kind of Experience do you want to share?