CSS | grid-gap Property - GeeksforGeeks

12 Apr, 2021
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 propertygrid-row-gap property
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
Internet Explorer 16.0
Mozilla Firefox 52.0
Safari 10.0
Opera 44.0
 
arorakashish0911
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?