CSS | grid-column-gap Property
The grid-column-gap property in CSS is used to set the size of the gap between the columns in a grid layout.
Syntax:
grid-column-gap: none|length|initial|inherit;
Property Values:
- none: It is used to set grid-column-gap property to its default value. The default value of grid-column-gap is 0.
- length: The size of the gap between columns is given in terms of length. The value of length can be in form pf px, em etc. The value must be non-negative.
- initial: It is used to set grid-column-gap property to its default value.
- inherit: This property is inherited from its parent.
Example 1:
<!DOCTYPE html> <html> <head> <title> CSS grid-column-gap Property </title> <style> .main { display: grid; grid-template-columns: auto auto auto; /* CSS property used here */ grid-column-gap: 20px; grid-row-gap: 20px; background-color: green; padding: 30px; } .main > div { background-color: white; text-align: center; padding: 15px; font-size: 25px; } </style> </head> <body> <div class="main"> <div>G</div> <div>E</div> <div>E</div> <div>K</div> <div>S</div> </div> </body> </html> |
Output:
Example 2: This example describes default grid-column-gap property.
<!DOCTYPE html> <html> <head> <title> CSS grid-column-gap Property </title> <style> .main { display: grid; grid-template-columns: auto auto auto; /* CSS property used here */ grid-column-gap: initial; grid-row-gap: 20px; background-color: green; padding: 30px; } .main > div { background-color: white; text-align: center; padding: 15px; font-size: 25px; } </style> </head> <body> <div class="main"> <div>G</div> <div>E</div> <div>E</div> <div>K</div> <div>S</div> </div> </body> </html> |
Output:
Supported browsers: The browser supported by CSS grid-column-gap property are listed below:
- Google Chrome 57.0
- Safari 10.0
- Opera 44.0
- Firefox 52.0
- Internet Explorer 16.0
Please Login to comment...