CSS grid - gap Property
CSS gap property is a shorthand property used to define the size of the gap between rows and columns.
To ensure compatibility with legacy websites, the gap property in CSS Grid was initially named grid-gap, and browsers still accept grid-gap as an alias.
The grid grid-gap property is a shorthand for the following individual grid-related properties:
Possible Values
<length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
<percentage> − A percentage value of the gap between rows and columns.
Points to be remembered
This property is defined by a <row-gap> value followed by a <column-gap> value; if <column-gap> is not specified, it takes the value of <row-gap>.
<row-gap> and <column-gap> can be given as either a <length> or a <percentage>.
Applies to
Multi-column elements, flex containers, grid containers.
DOM Syntax
object.style.gap = "<length>|<percentage>";
CSS gap - <length>
The following example demonstrates that gap: 30px property adds the 30px gap between columns and rows in the grid layout −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: 30px; color: white; text-align: center; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; } </style> </head> <body> <h3>The grid layout adds 30px gap between columns and rows.</h3> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS gap - <percentage>
The following example demonstrates that gap: 20% property adds the 20% gap between columns and rows in the grid layout −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: 20%; color: white; text-align: center; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS gap - calc()
The following example demonstrates that gap: calc(10% + 20px) property calculated the gap between grid items is as 10% of the container's width plus an additional 20px −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: calc(10% + 20px); color: white; text-align: center; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; width: 100px; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS gap - Flex Layout
The following example demonstrates that the flex layout adds 40px gap between rows and 20px gap between columns −
<html> <head> <style> .grid-container { display: flex; flex-wrap: wrap; gap: 40px 20px; color: white; text-align: center; width: 320px; background-color: lightgreen; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; } </style> </head> <body> <h3>The flex layout adds 40px gap between rows and 20px gap between column.</h3> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS gap - Grid Layout
The following example demonstrates that the grid layout has 30px gap between rows and 100px gap between columns −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; gap: 30px 100px; color: white; text-align: center; background-color: lightgreen; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; } </style> </head> <body> <h3>The grid layout adds 30px gap between rows and 100px gap between columns</h3> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> <div>Grid item 7</div> <div>Grid item 8</div> </div> </body> </html>
CSS gap - Flexbox Layout
The following example demonstrates that the flexbox layout has 30px gap between rows and 80px gap between columns −
<html> <head> <style> .grid-container { display: flex; flex-wrap: wrap; gap: 30px 80px; color: white; text-align: center; background-color: lightgreen; padding: 5px; } .grid-container > div { background-color: red; padding: 5px; } </style> </head> <body> <h3>The flexbox layout has 30px gap between rows and 80px gap between columns.</h3> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> <div>Grid item 7</div> <div>Grid item 8</div> </div> </body> </html>
CSS gap - Multi-column Layout
The following example demonstrates that the multi-column layout has 40px gap between columns −
<html> <head> <style> .grid-container { columns: 4; gap: 40px; color: red; text-align: center; background-color: lightgreen; padding: 5px; } </style> </head> <body> <h3>The multi-column layout has 40px gap between columns.</h3> <div class="grid-container"> <div>Grid item 1</div> <div>Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> </div> </body> </html>
CSS gap - Related Properties
Following is the list of CSS properties related to gap property:
property | value |
---|---|
row-gap | Determines how the content of an element behaves when it is too wide to fit inside its container. |
column-gap | Determines how the content of an element behaves when it is too wide to fit inside its container. |
To Continue Learning Please Login
Login with Google