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.
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
