A
V
Gap
Definition and Usage
The Gap utility classes control the spacing between items inside flex or grid containers. They are useful for managing consistent spacing without adding manual margins or padding to individual elements.
Gap Utility Examples
| Property | Value |
|---|---|
| Gp1 | gap: 0.0625rem; |
| Gp16 | gap: 1rem; |
| Gp25 | gap: 1.5625rem; |
Note
This can be used only with display grid or display flex.
The range of this property is from 1 to 25.
Row Gap
Definition and Usage
The Row Gap utility classes specifically control the vertical spacing (row gap) between items within a flex or grid container. These classes are useful when you want to set vertical spacing independently from horizontal spacing.
Row Gap Utility Examples
| Property | Value |
|---|---|
| RwGp1 | row-gap: 0.0625rem; |
| RwGp10 | row-gap: 0.625rem; |
Note
This can be used only with display grid or display flex.
The range of this property is from 1 to 10.
Column Gap
Definition and Usage
The Column Gap utility classes are used to control the horizontal spacing (column gap) between items in flex or grid containers. These classes provide fine-tuned control when you want to set column spacing independently from row spacing.
Column Gap Utility Examples
| Property | Value |
|---|---|
| CnGp1 | column-gap: 0.0625rem; |
| CnGp10 | column-gap: 0.625rem; |
Note
Use CnGp on flex or grid containers to control horizontal spacing between child elements without affecting vertical gaps. This is particularly useful when you want consistent spacing in multi-column layouts or inline-flex grids.
The range of this property is from 1 to 10.