CSS grid - row-gap
CSS row-gap property defines the size of the gap between rows.
To ensure compatibility with legacy websites, the gap property in CSS Grid was initially named grid-row-gap, and browsers will still accept grid-row-gap as an alias for row-gap.
Possible Values
<length-percentage> − The percentage value for row-gap determines the width of the gap between rows in a grid, relative to the height of the grid container.
Applies to
Multi-column elements, flex containers, grid containers.
DOM Syntax
object.style.rowGap = "<length>|<percentage>";
CSS row-gap - <length>
The following example demonstrates that row-gap: 30px property adds the 30px gap between rows in the grid layout −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; row-gap: 30px; color: white; text-align: center; } .grid-container > div { background-color: red; border: 2px solid blue; padding: 10px; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS row-gap - <percentage>
The following example demonstrates that row-gap: 40% property adds the 40% gap between rows in the grid layout −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; row-gap: 40%; } .grid-container > div { background-color: red; color: white; padding: 10px; border: 2px solid blue; text-align: center; } </style> </head> <body> <div class="grid-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div> </body> </html>
CSS row-gap - Flex Layout
The following example demonstrates how to use row-gap property is used to add a row gap between adjacent flex items.
The display: flex and flex-flow: wrap property is used to create a flex container. If the items do not fit within the container's width, they will move to the next row.
The flex: 1 1 auto property allows the flex items to grow or shrink as needed.
<html> <head> <style> .flex-container { display: flex; flex-wrap: wrap; width: 250px; row-gap: 20px; } .flex-container > div { border: 2px solid red; background-color: pink; flex: 1 1 auto; padding: 10px; } </style> </head> <body> <div class="flex-container"> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> <div>Flex Item 4</div> <div>Flex Item 5</div> </div> </body> </html>
CSS column-gap - Grid Layout
The following example demonstrates that the row-gap: 30px property adds 30px vertical space between the grid items −
<html> <head> <style> .grid-container { display: grid; height: 150px; grid-template-columns: 100px 1fr; grid-template-rows: repeat(3, 1fr); row-gap: 30px; } .grid-container > div { border: 2px solid red; background-color: pink; } </style> </head> <body> <div class="grid-container"> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> <div>Flex Item 4</div> <div>Flex Item 5</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google