DEV Community

Sathish Kumar
Sathish Kumar

Posted on

GAP:

What is gap?

​The gap property sets the distance only between grid or flex items.

​ 1) No margin collapse issues.

2) ​No need for :last-child { margin-right: 0; } hacks.
Enter fullscreen mode Exit fullscreen mode

​ 3) Works vertically, horizontally, or both!

​How to use it?

​To use gap, the parent element must be set to display: flex or display: grid.

Example:

    .card-container {

      display: flex;

      flex-direction: row; 

      gap: 16px; 

    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)