grid-column-gap
Anonymous contributor
Anonymous contributor88 total contributions
Anonymous contributor
Published Jul 16, 2021Updated Sep 3, 2021
Contribute to Docs
Specifies the spacing between column elements within a grid framework.
Syntax
.div-container {column-gap: <gap-value>;}
where <gap-value>
can be one of the following:
- Grid keyword:
normal
- Pixel value:
3px
- A percentage:
1%
Example 1
Columns with five pixels of buffer between each:
.content-a-container {display: grid;grid-auto-columns: 20%;column-gap: 5px;}
Example 2
A one percent spacing across grid column elements:
.content-b-container {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;column-gap: 1%;}
All contributors
- Anonymous contributorAnonymous contributor88 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- Anonymous contributor
- christian.dinh
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.