column-gap (grid-column-gap)#

#Introduction

The column-gap/grid-column-gap CSS property sets the size of the gap (gutter) between an element's columns in flexible box layout and grid layout.

For compatibility, column-gap or grid-column-gap can be used both.

#Examples

css-apisrc/column-gap/App.tsx

Code

Preview

#Syntax

/* <length> values */
column-gap: 20px;
column-gap: 1em;

/* <percentage> value */
column-gap: 10%;

/* calc() values */
column-gap: calc(10% + 20px);

#Values

• <length>

Is the width of the gutter separating the columns.

• <percentage>

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

#Formal definition

#Formal syntax

column-gap = <length-percentage [0,∞]>

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

#Difference with the web

• normal is not supported.

#Compatibility