CSS | grid-gap Property
The grid-gap property sets the size of the gap between the rows and columns in a grid layout.
It is a shorthand property for the following properties:
- grid-column-gap property
- grid-row-gap property
Syntax:
grid-gap: grid-row-gap grid-column-gap;
Property Values:
- grid-row-gap: It sets the size of the gap between the rows in a grid layout. Its default value is 0.
- grid-column-gap: It sets the size of the gap between the columns in a grid layout. Its default value is 0.
Example 1:
html
<!DOCTYPE html><html><head> <title> CSS | grid-gap Property </title> <style> body { text-align: center; } h1 { color: black; } .grid-container { display: grid; grid-template-columns: auto auto auto; grid-column-gap: 50px; grid-row-gap: 10px; background-color: blue; padding: 10px; } .grid-container > div { background-color: white; text-align: center; padding: 20px 0; font-size: 30px; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>Grid-gap property</h2> <p>This grid has a 50px gap between columns and 10px gap between rows. :</p> <div class="grid-container"> <div class="item1">G</div> <div class="item2">E</div> <div class="item3">E</div> <div class="item4">K</div> <div class="item5">S</div> </div></body></html> |
Output:
Example 2:
html
<!DOCTYPE html><html><head> <title> CSS | grid-gap Property </title> <style> body { text-align: center; } h1 { color: green; } .grid-container { display: grid; grid-template-columns: auto auto auto; grid-column-gap: 8%; grid-row-gap: 5%; background-color: black; padding: 6%; } .grid-container > div { background-color: yellow; text-align: center; padding: 20px 0; font-size: 30px; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>Grid-gap property</h2> <p>This grid has a 8% gap between columns and 5% gap between rows:</p> <div class="grid-container"> <div class="item1">G</div> <div class="item2">E</div> <div class="item3">E</div> <div class="item4">K</div> <div class="item5">S</div> </div></body></html> |
Output:
Supported Browsers: The browsers supported by grid-gap property are listed below:
- Google Chrome 57.0 and above
- Edge 16.0 and above
- Mozilla Firefox 52.0 and above
- Safari 10.1 and above
- Opera 44.0 and above
- Internet Explorer not supported
Please Login to comment...