CSS Flexbox Gaps
Panchal Tech October 19, 2022
In CSS Grid, we can use the gap, column-gap, and row-gap properties to define the gaps between rows and columns or both at the same time. The column-gap feature also appears in the Multi-column layout to create gaps between columns.
While you can use margins to space out grid items, the nice thing about the gap feature is that you only get gaps between your items; you do not end up with additional space to account for at the start and end of the grid. Adding margins has typically been how we have created space between flex items. To create a regular space between flex items, we use a margin. If we do not want a margin at the start and end, we have to use a negative margin on the container to remove it.
It would be really nice to have that gap feature in Flexbox as well, wouldn’t it? The good news is that we do have — the gap property in flex layouts is available in all major browsers and a top compatibility challenge is resolved.