Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
column-gap

column-gap

Specifies the spacing between items in the column direction (main axis direction) within a flex container or grid container.

Sample Code

/* Set column gap to 16px */
.container {
    display: flex;
    column-gap: 16px;
}

/* Used in combination with row-gap */
.container-combo {
    display: flex;
    flex-wrap: wrap;
    row-gap: 32px;
    column-gap: 16px;
}

Available Values

Value	Description
normal	The initial value. Equivalent to 0 in Flexbox. Equivalent to '1em' in multi-column layout.
<length>	Specifies the gap using a length value such as px, em, or rem.
<percentage>	Specifies the gap as a percentage relative to the container size.

Specification

Item	Details
Initial value	normal
Applies to	Flex containers, grid containers, multi-column containers
Inherited	No
Animatable	Yes (interpolated as length/percentage)

Browser Support

Desktop

Chrome

1+ ○

Firefox

1.5+ ○

Safari

3+ ○

2 and earlier ×

Edge

12+ ○

Supported in all versions

11 ○

10 ○

9 ×

8 ×

7 ×

6 ×

Opera

11.1+ ○

10 and earlier ×

Mobile

iOS Safari

2+ ○

1 and earlier ×

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data based on MDN / Can I Use.

Overview

'column-gap' is a property that specifies the spacing between items in the column direction. When 'flex-direction: row', it controls the spacing between horizontally-arranged items. Previously it was only for multi-column layouts, but it now also applies to Flexbox and CSS Grid.

Difference from 'gap'

When setting the same value for both row and column gaps, you can use just 'gap'. Use 'column-gap' when you only want to specify the column gap.

/* The following two are equivalent */
.container-a { gap: 32px 16px;}
.container-b { row-gap: 32px; column-gap: 16px;}

Related Properties

Property	Description
row-gap	Specifies the spacing in the row direction (cross axis direction).
gap	Shorthand for 'row-gap' and 'column-gap'.

If you find any errors or copyright issues, please contact us.

Home