CSS gridrowgap Property (original) (raw)

CSS grid-row-gap Property

Last Updated : 27 Aug, 2024

The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing a value to the grid-row-gap.

**Syntax:

grid-row-gap: length | percentage | global-values;

**Property Values:

• **length: The user can set the grid-row-gap value to be a fixed length measured in px, cm, etc.
• **global-value: This property is used to set the grid-row-gap value in the form of some fixed terms which include inherit, and initial.
• **percentage (%): This property is used to set grid-row-gap values in the form of percentages, where percentage values are relative to the dimension of the element.

**Example: In this example, we are using the above-explained property.

html `

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

    .main>div {
        background-color: white;
        text-align: center;
        padding: 15px;
        font-size: 25px;
    }
</style>

`

**Output:

**Example:

html `

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

    .main>div {
        background-color: white;
        text-align: center;
        padding: 15px;
        font-size: 25px;
    }
</style>

`

**Output:

**Example:

html `

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

    .main>div {
        background-color: white;
        text-align: center;
        padding: 15px;
        font-size: 25px;
    }
</style>

`

**Output:

**Supported Browsers: The browser supported by _CSS grid-row-gap Property are listed below:

• Google Chrome 47.0 and above
• Edge 16.0 and above
• Firefox 52.0 and above
• Safari 10.1 and above
• Opera 34.0 and above