码农教程 - 一技在手,衣食无忧! tools

目录

CSS column-gap Property

❮ Previous Complete CSS Reference Next ❯

Example

Specify a 40 pixels gap between the columns in a multicolumn layout:

div {
  column-gap: 40px;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The column-gap property specifies the gap between the columns in grid, flexbox or multi-column layout.

Note: If there is a column-rule between columns, it will appear in the middle of the gap.

Show demo ❯

Default value: normal
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS Box Alignment Module Level 3
JavaScript syntax: object.style.columnGap="50px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
column-gap (in Multiple Columns) 50 10 52 10 37
column-gap (in Grid) 66 16 61 12 53
column-gap (in Flexbox) 84 84 63 14.1 70

CSS Syntax

column-gap: length|normal|initial|inherit;

Property Values

Value Description Demo
length A specified length that will set the gap between the columns Demo ❯
normal Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Three columns

Divide the text in a <div> element into three columns:

div {
  column-count: 3;
}
Try it Yourself »

Column-rule

Specify the width, style, and color of the rule between columns:

div {
  column-rule: 4px double #ff00ff;
}
Try it Yourself »

Flexbox layout

Set the gap between columns to 30px in a flexbox layout:

#flex-container {
  display: flex;
  column-gap: 30px;
}
Try it Yourself »

Grid layout

Set the gap between columns to 30px in a grid layout:

#grid-container {
  display: grid;
  column-gap: 30px;
}
Try it Yourself »

Related Pages

CSS Tutorial: CSS Multiple Columns

CSS Tutorial: CSS Flexbox Layout

CSS Tutorial: CSS Grid Layout

CSS Reference: row-gap property

CSS Reference: gap property

HTML DOM reference: columnGap property


❮ Previous Complete CSS Reference Next ❯