column-gap (grid-column-gap)
Quick Summary for column-gap
The column-gap CSS property sets the size of the gap (gutter) between an element's columns.
Code Usage for column-gap
/* Keyword value */ column-gap: normal;  /* <length> values */ column-gap: 3px; column-gap: 2.5em;  /* <percentage> value */ column-gap: 3%;  /* Global values */ column-gap: inherit; column-gap: initial; column-gap: revert; column-gap: unset; 
More Details for column-gap

column-gap (grid-column-gap)

The column-gap CSS property sets the size of the gap (gutter) between an element's columns.

Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.

Syntax

/* Keyword value */ column-gap: normal;  /* <length> values */ column-gap: 3px; column-gap: 2.5em;  /* <percentage> value */ column-gap: 3%;  /* Global values */ column-gap: inherit; column-gap: initial; column-gap: revert; column-gap: unset; 

The column-gap property is specified as one of the values listed below.

Values

normal

The browser's default spacing is used between columns. For multi-column layout this is specified as 1em. For all other layout types it is 0.

<length>

The size of the gap between columns, defined as a <length>. The <length> property's value must be non-negative.

<percentage>

The size of the gap between columns, defined as a <percentage>. The <percentage> property's value must be non-negative.

Formal definition

Initial valuenormal
Applies tomulti-column elements, flex containers, grid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();

Formal syntax

normal | <length-percentage>

where <length-percentage> = <length> | <percentage>

Examples

Flex layout

HTML
<div id="flexbox">   <div></div>   <div></div>   <div></div> </div> 
CSS
#flexbox {   display: flex;   height: 100px;   column-gap: 20px; }  #flexbox > div {   border: 1px solid green;   background-color: lime;   flex: auto; } 
Result

Grid layout

HTML
<div id="grid">   <div></div>   <div></div>   <div></div> </div> 
CSS
#grid {   display: grid;   height: 100px;   grid-template-columns: repeat(3, 1fr);   grid-template-rows: 100px;   column-gap: 20px; }  #grid > div {   border: 1px solid green;   background-color: lime; } 
Result

Multi-column layout

HTML
<p class="content-box">   This is some multi-column text with a 40px column   gap created with the CSS `column-gap` property.   Don't you think that's fun and exciting? I sure do! </p> 
CSS
.content-box {   column-count: 3;   column-gap: 40px; } 
Result

Specifications

Specification
CSS Box Alignment Module Level 3 # column-row-gap
CSS Grid Layout Module Level 3 # gutters
CSS Multi-column Layout Module Level 2 # column-gap

See also

Related CSS properties: row-gap, gap Grid Layout Guide: Basic concepts of grid layout - Gutters Multi-column Layout Guide: Styling Columns

Last modified: Sep 15, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Random CSS Property

translateZ()

The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.
translateZ() css reference