Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Usage of CSS grid-column-gap property
The CSS grid-column-gap property is used to set the gap between columns in a CSS Grid layout. This property allows you to create space between grid columns without affecting the padding or margins of individual grid items.
Syntax
selector {
grid-column-gap: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the gap in px, em, rem, etc. |
% |
Defines the gap as a percentage of the container width |
normal |
Default value, typically 0 |
Example
The following example demonstrates how to create a 20px gap between grid columns −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-column-gap: 20px;
}
.ele {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class="container">
<div class="ele">1</div>
<div class="ele">2</div>
<div class="ele">3</div>
<div class="ele">4</div>
<div class="ele">5</div>
<div class="ele">6</div>
</div>
</body>
</html>
A game board with a green background containing 6 orange boxes arranged in a 2-column grid layout. Each column has a 20px gap between them, with numbered boxes (1-6) displayed in a grid format.
Browser Support
Note: The grid-column-gap property has been deprecated in favor of the shorthand column-gap property, which works with both Grid and Flexbox layouts. Modern browsers support both, but column-gap is recommended for new projects.
Conclusion
The grid-column-gap property provides an easy way to add spacing between grid columns. While still supported, consider using the modern column-gap property for better browser compatibility and future-proofing.
111 Views
