The gap controls allow you to easily adjust the spacing between elements within a box.
Gap is an easier way to uniformly control spacing between an elements contents. This is a quick and easy way to set and manage consistent margins between all items found within a box.
Row gap refers to the distance between elements stacked on top of each other.
Column gap refers to the distance between elements placed next to each other.
The most common example of using gap is for sections containing multiple elements or cards. Simply select the smallest corresponding box that contains all the elements you’re looking to space out, and utilize your row and column gap controls.
For a list or grid of elements with equal spacing, use the gap control instead of margin or padding. This will ensure consistent and easy to manage spacing between elements.