CSS gap property

Description

CSS gap property defines the distance between two columns or two rows. It is a shorthand property of row-gap and column-gap.

We take an example of a grid. And we'll see the gap between two rows or two columns.

Syntax

gap : row-gap    column-gap

Property values

row-gap

normalDefault

It represents 0px gap between rows.

row-gap: normal;

+ve length

length value adds respective gap between the rows. The following demo represents 30px gap between the rows.

row-gap: 30px;

+ve percentage

percentage value adds respective gap between the rows. The following demo represents 30% gap between the rows.

row-gap: 30%;

column-gap

normalDefault

It defines normal length i.e. 1em gap between columns.

column-gap: normal;

+ve length

+ve length defines space between two columns. 40px means there is 40px space between two columns.

column-gap: 40px;

+ve percentage

percentage value defines space between two columns. 40% means there is 40% space between two columns.

column-gap: 40%;

Applicable to

It applies to flex containers, grid containers, and multi-column contaienrs.


#CSS digger
Was this article helpful?

 
item1
item2
item3
item4
×

Ctrl+D