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.

gap : row-gap column-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%;

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%;

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

#CSS digger
Was this article helpful?

item1

item2

item3

item4

▾

CSS

HTML

Ctrl+D