CSS grid-column-gap Property
Last Updated :
22 Apr, 2024
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:
Property Value
| Definition
|
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.
|
Different Example of CSS Grid Column Property
Example 1: In this example, we are using the above-explained property.
html
<!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 the default grid-column-gap property.Â
html
<!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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...