Gap

These classes allows you to apply some gap attributes on any HTMLElement and with

Platform  
css
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Simple flex grid

1
2
3
 

Loading code example. Please wait...

Simple grid

1
2
3
 

Loading code example. Please wait...

  Install

  CSS Classes

  1. s-gap

    Apply the default gap to any HTMLElement

  2. s-gap:row

    Apply the default row gap to any HTMLElement

  3. s-gap:column

    Apply the default column gap to any HTMLElement

  4. s-gap:default

    Apply the default gap to any HTMLElement

  5. s-gap:row:default

    Apply the default row gap to any HTMLElement

  6. s-gap:column:default

    Apply the default column gap to any HTMLElement

  7. s-gap:0

    Apply the 0 gap to any HTMLElement

  8. s-gap:row:0

    Apply the 0 row gap to any HTMLElement

  9. s-gap:column:0

    Apply the 0 column gap to any HTMLElement

  10. s-gap:10

    Apply the 10 gap to any HTMLElement

  11. s-gap:row:10

    Apply the 10 row gap to any HTMLElement

  12. s-gap:column:10

    Apply the 10 column gap to any HTMLElement

  13. s-gap:20

    Apply the 20 gap to any HTMLElement

  14. s-gap:row:20

    Apply the 20 row gap to any HTMLElement

  15. s-gap:column:20

    Apply the 20 column gap to any HTMLElement

  16. s-gap:30

    Apply the 30 gap to any HTMLElement

  17. s-gap:row:30

    Apply the 30 row gap to any HTMLElement

  18. s-gap:column:30

    Apply the 30 column gap to any HTMLElement

  19. s-gap:40

    Apply the 40 gap to any HTMLElement

  20. s-gap:row:40

    Apply the 40 row gap to any HTMLElement

  21. s-gap:column:40

    Apply the 40 column gap to any HTMLElement

  22. s-gap:50

    Apply the 50 gap to any HTMLElement

  23. s-gap:row:50

    Apply the 50 row gap to any HTMLElement

  24. s-gap:column:50

    Apply the 50 column gap to any HTMLElement

  25. s-gap:60

    Apply the 60 gap to any HTMLElement

  26. s-gap:row:60

    Apply the 60 row gap to any HTMLElement

  27. s-gap:column:60

    Apply the 60 column gap to any HTMLElement

  28. s-gap:70

    Apply the 70 gap to any HTMLElement

  29. s-gap:row:70

    Apply the 70 row gap to any HTMLElement

  30. s-gap:column:70

    Apply the 70 column gap to any HTMLElement

  31. s-gap:80

    Apply the 80 gap to any HTMLElement

  32. s-gap:row:80

    Apply the 80 row gap to any HTMLElement

  33. s-gap:column:80

    Apply the 80 column gap to any HTMLElement

  34. s-gap:90

    Apply the 90 gap to any HTMLElement

  35. s-gap:row:90

    Apply the 90 row gap to any HTMLElement

  36. s-gap:column:90

    Apply the 90 column gap to any HTMLElement

  37. s-gap:100

    Apply the 100 gap to any HTMLElement

  38. s-gap:row:100

    Apply the 100 row gap to any HTMLElement

  39. s-gap:column:100

    Apply the 100 column gap to any HTMLElement

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on