CSS properties - row-gap

revision:

row-gap property

- specifies the gap between the rows in a flexbox or grid layout.

The row-gap property was formerly known as grid-row-gap.

CSS syntax : row-gap: length | normal | initial | inherit;

Property values:

length : a specified length or % that will set the gap between the rows

normal : default value. Specifies a normal gap between the rows

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.rowGap"5vw"

example: row-gap property

1
2
3
4
5
6
7
8
9
10
code: 
                    <div id="mother">
                        <div id="grid-container">
                            <div>1</div>
                            <div>2</div>
                            <div>3</div>  
                            <div>4</div>
                            <div>5</div>
                            <div>6</div>
                            <div>7</div>
                            <div>8</div>
                            <div>9</div>
                            <div>10</div>
                        </div>
                    </div>
                    <style>
                        div#mother {border: 0.1vw solid black; padding: 0.3vw; margin: 0.3vw;}
                        #grid-container {border: 0.2vw solid black; background-color: mintcream; display: grid; 
                            grid-template-columns: 1fr 1fr 1fr;   row-gap: 3vw;}
                        #grid-container > div {background-color: yellow;}
                    </style>