Gutters - horizontal and vertical

These gutter styles handle the gaps between flexbox columns and rows. They can also be used for grids.

This will set the --gap variable to the specified value and set the gap style on an element.

The size of the gap is set with the gutter variables.

Each gutter size has a class to go with each of the media query viewport sizes. For example:

g-2-3xs
g-2-2xs
g-2-xs
g-2-sm
g-2-md
g-2-lg
g-2-xl
g-2-1xl
g-2-3xl
g-2-4xl
g-2-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/gutter/all.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/gutter/3xs/all.css';
@import 'cacao-css/dist/gutter/2xs/all.css';
@import 'cacao-css/dist/gutter/xs/all.css';
@import 'cacao-css/dist/gutter/sm/all.css';
@import 'cacao-css/dist/gutter/md/all.css';
@import 'cacao-css/dist/gutter/lg/all.css';
@import 'cacao-css/dist/gutter/xl/all.css';
@import 'cacao-css/dist/gutter/2xl/all.css';
@import 'cacao-css/dist/gutter/3xl/all.css';
@import 'cacao-css/dist/gutter/4xl/all.css';
@import 'cacao-css/dist/gutter/5xl/all.css';

See Import Cacao CSS for more information.

Source CSS

Default styles

gutter/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */


.g-0 {
    --gap: var(--gutter-0);
}

.g-1 {
    --gap: var(--gutter-1);
}

.g-2 {
    --gap: var(--gutter-2);
}

.g-3 {
    --gap: var(--gutter-3);
}

.g-4 {
    --gap: var(--gutter-4);
}

.g-5 {
    --gap: var(--gutter-5);
}

.g-6 {
    --gap: var(--gutter-6);
}

.g-7 {
    --gap: var(--gutter-7);
}

.g-8 {
    --gap: var(--gutter-8);
}

.g-9 {
    --gap: var(--gutter-9);
}

.g-10 {
    --gap: var(--gutter-10);
}

.g-11 {
    --gap: var(--gutter-11);
}

.g-12 {
    --gap: var(--gutter-12);
}

.g-13 {
    --gap: var(--gutter-13);
}

.g-14 {
    --gap: var(--gutter-14);
}

.g-15 {
    --gap: var(--gutter-15);
}

.g-0,
.g-1,
.g-2,
.g-3,
.g-4,
.g-5,
.g-6,
.g-7,
.g-8,
.g-9,
.g-10,
.g-11,
.g-12,
.g-13,
.g-14,
.g-15 {
    gap: var(--gap);
}

3xs styles

gutter/3xs/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-3xs) {
    .g-0-3xs {
        --gap: var(--gutter-0);
    }

    .g-1-3xs {
        --gap: var(--gutter-1);
    }

    .g-2-3xs {
        --gap: var(--gutter-2);
    }

    .g-3-3xs {
        --gap: var(--gutter-3);
    }

    .g-4-3xs {
        --gap: var(--gutter-4);
    }

    .g-5-3xs {
        --gap: var(--gutter-5);
    }

    .g-6-3xs {
        --gap: var(--gutter-6);
    }

    .g-7-3xs {
        --gap: var(--gutter-7);
    }

    .g-8-3xs {
        --gap: var(--gutter-8);
    }

    .g-9-3xs {
        --gap: var(--gutter-9);
    }

    .g-10-3xs {
        --gap: var(--gutter-10);
    }

    .g-11-3xs {
        --gap: var(--gutter-11);
    }

    .g-12-3xs {
        --gap: var(--gutter-12);
    }

    .g-13-3xs {
        --gap: var(--gutter-13);
    }

    .g-14-3xs {
        --gap: var(--gutter-14);
    }

    .g-15-3xs {
        --gap: var(--gutter-15);
    }

    .g-0-3xs,
    .g-1-3xs,
    .g-2-3xs,
    .g-3-3xs,
    .g-4-3xs,
    .g-5-3xs,
    .g-6-3xs,
    .g-7-3xs,
    .g-8-3xs,
    .g-9-3xs,
    .g-10-3xs,
    .g-11-3xs,
    .g-12-3xs,
    .g-13-3xs,
    .g-14-3xs,
    .g-15-3xs {
        gap: var(--gap);
    }
}

2xs styles

gutter/2xs/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-2xs) {
    .g-0-2xs {
        --gap: var(--gutter-0);
    }

    .g-1-2xs {
        --gap: var(--gutter-1);
    }

    .g-2-2xs {
        --gap: var(--gutter-2);
    }

    .g-3-2xs {
        --gap: var(--gutter-3);
    }

    .g-4-2xs {
        --gap: var(--gutter-4);
    }

    .g-5-2xs {
        --gap: var(--gutter-5);
    }

    .g-6-2xs {
        --gap: var(--gutter-6);
    }

    .g-7-2xs {
        --gap: var(--gutter-7);
    }

    .g-8-2xs {
        --gap: var(--gutter-8);
    }

    .g-9-2xs {
        --gap: var(--gutter-9);
    }

    .g-10-2xs {
        --gap: var(--gutter-10);
    }

    .g-11-2xs {
        --gap: var(--gutter-11);
    }

    .g-12-2xs {
        --gap: var(--gutter-12);
    }

    .g-13-2xs {
        --gap: var(--gutter-13);
    }

    .g-14-2xs {
        --gap: var(--gutter-14);
    }

    .g-15-2xs {
        --gap: var(--gutter-15);
    }

    .g-0-2xs,
    .g-1-2xs,
    .g-2-2xs,
    .g-3-2xs,
    .g-4-2xs,
    .g-5-2xs,
    .g-6-2xs,
    .g-7-2xs,
    .g-8-2xs,
    .g-9-2xs,
    .g-10-2xs,
    .g-11-2xs,
    .g-12-2xs,
    .g-13-2xs,
    .g-14-2xs,
    .g-15-2xs {
        gap: var(--gap);
    }
}

xs styles

gutter/xs/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-xs) {
    .g-0-xs {
        --gap: var(--gutter-0);
    }

    .g-1-xs {
        --gap: var(--gutter-1);
    }

    .g-2-xs {
        --gap: var(--gutter-2);
    }

    .g-3-xs {
        --gap: var(--gutter-3);
    }

    .g-4-xs {
        --gap: var(--gutter-4);
    }

    .g-5-xs {
        --gap: var(--gutter-5);
    }

    .g-6-xs {
        --gap: var(--gutter-6);
    }

    .g-7-xs {
        --gap: var(--gutter-7);
    }

    .g-8-xs {
        --gap: var(--gutter-8);
    }

    .g-9-xs {
        --gap: var(--gutter-9);
    }

    .g-10-xs {
        --gap: var(--gutter-10);
    }

    .g-11-xs {
        --gap: var(--gutter-11);
    }

    .g-12-xs {
        --gap: var(--gutter-12);
    }

    .g-13-xs {
        --gap: var(--gutter-13);
    }

    .g-14-xs {
        --gap: var(--gutter-14);
    }

    .g-15-xs {
        --gap: var(--gutter-15);
    }

    .g-0-xs,
    .g-1-xs,
    .g-2-xs,
    .g-3-xs,
    .g-4-xs,
    .g-5-xs,
    .g-6-xs,
    .g-7-xs,
    .g-8-xs,
    .g-9-xs,
    .g-10-xs,
    .g-11-xs,
    .g-12-xs,
    .g-13-xs,
    .g-14-xs,
    .g-15-xs {
        gap: var(--gap);
    }
}

sm styles

gutter/sm/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-sm) {
    .g-0-sm {
        --gap: var(--gutter-0);
    }

    .g-1-sm {
        --gap: var(--gutter-1);
    }

    .g-2-sm {
        --gap: var(--gutter-2);
    }

    .g-3-sm {
        --gap: var(--gutter-3);
    }

    .g-4-sm {
        --gap: var(--gutter-4);
    }

    .g-5-sm {
        --gap: var(--gutter-5);
    }

    .g-6-sm {
        --gap: var(--gutter-6);
    }

    .g-7-sm {
        --gap: var(--gutter-7);
    }

    .g-8-sm {
        --gap: var(--gutter-8);
    }

    .g-9-sm {
        --gap: var(--gutter-9);
    }

    .g-10-sm {
        --gap: var(--gutter-10);
    }

    .g-11-sm {
        --gap: var(--gutter-11);
    }

    .g-12-sm {
        --gap: var(--gutter-12);
    }

    .g-13-sm {
        --gap: var(--gutter-13);
    }

    .g-14-sm {
        --gap: var(--gutter-14);
    }

    .g-15-sm {
        --gap: var(--gutter-15);
    }

    .g-0-sm,
    .g-1-sm,
    .g-2-sm,
    .g-3-sm,
    .g-4-sm,
    .g-5-sm,
    .g-6-sm,
    .g-7-sm,
    .g-8-sm,
    .g-9-sm,
    .g-10-sm,
    .g-11-sm,
    .g-12-sm,
    .g-13-sm,
    .g-14-sm,
    .g-15-sm {
        gap: var(--gap);
    }
}

md styles

gutter/md/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-md) {
    .g-0-md {
        --gap: var(--gutter-0);
    }

    .g-1-md {
        --gap: var(--gutter-1);
    }

    .g-2-md {
        --gap: var(--gutter-2);
    }

    .g-3-md {
        --gap: var(--gutter-3);
    }

    .g-4-md {
        --gap: var(--gutter-4);
    }

    .g-5-md {
        --gap: var(--gutter-5);
    }

    .g-6-md {
        --gap: var(--gutter-6);
    }

    .g-7-md {
        --gap: var(--gutter-7);
    }

    .g-8-md {
        --gap: var(--gutter-8);
    }

    .g-9-md {
        --gap: var(--gutter-9);
    }

    .g-10-md {
        --gap: var(--gutter-10);
    }

    .g-11-md {
        --gap: var(--gutter-11);
    }

    .g-12-md {
        --gap: var(--gutter-12);
    }

    .g-13-md {
        --gap: var(--gutter-13);
    }

    .g-14-md {
        --gap: var(--gutter-14);
    }

    .g-15-md {
        --gap: var(--gutter-15);
    }

    .g-0-md,
    .g-1-md,
    .g-2-md,
    .g-3-md,
    .g-4-md,
    .g-5-md,
    .g-6-md,
    .g-7-md,
    .g-8-md,
    .g-9-md,
    .g-10-md,
    .g-11-md,
    .g-12-md,
    .g-13-md,
    .g-14-md,
    .g-15-md {
        gap: var(--gap);
    }
}

lg styles

gutter/lg/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-lg) {
    .g-0-lg {
        --gap: var(--gutter-0);
    }

    .g-1-lg {
        --gap: var(--gutter-1);
    }

    .g-2-lg {
        --gap: var(--gutter-2);
    }

    .g-3-lg {
        --gap: var(--gutter-3);
    }

    .g-4-lg {
        --gap: var(--gutter-4);
    }

    .g-5-lg {
        --gap: var(--gutter-5);
    }

    .g-6-lg {
        --gap: var(--gutter-6);
    }

    .g-7-lg {
        --gap: var(--gutter-7);
    }

    .g-8-lg {
        --gap: var(--gutter-8);
    }

    .g-9-lg {
        --gap: var(--gutter-9);
    }

    .g-10-lg {
        --gap: var(--gutter-10);
    }

    .g-11-lg {
        --gap: var(--gutter-11);
    }

    .g-12-lg {
        --gap: var(--gutter-12);
    }

    .g-13-lg {
        --gap: var(--gutter-13);
    }

    .g-14-lg {
        --gap: var(--gutter-14);
    }

    .g-15-lg {
        --gap: var(--gutter-15);
    }

    .g-0-lg,
    .g-1-lg,
    .g-2-lg,
    .g-3-lg,
    .g-4-lg,
    .g-5-lg,
    .g-6-lg,
    .g-7-lg,
    .g-8-lg,
    .g-9-lg,
    .g-10-lg,
    .g-11-lg,
    .g-12-lg,
    .g-13-lg,
    .g-14-lg,
    .g-15-lg {
        gap: var(--gap);
    }
}

xl styles

gutter/xl/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-xl) {
    .g-0-xl {
        --gap: var(--gutter-0);
    }

    .g-1-xl {
        --gap: var(--gutter-1);
    }

    .g-2-xl {
        --gap: var(--gutter-2);
    }

    .g-3-xl {
        --gap: var(--gutter-3);
    }

    .g-4-xl {
        --gap: var(--gutter-4);
    }

    .g-5-xl {
        --gap: var(--gutter-5);
    }

    .g-6-xl {
        --gap: var(--gutter-6);
    }

    .g-7-xl {
        --gap: var(--gutter-7);
    }

    .g-8-xl {
        --gap: var(--gutter-8);
    }

    .g-9-xl {
        --gap: var(--gutter-9);
    }

    .g-10-xl {
        --gap: var(--gutter-10);
    }

    .g-11-xl {
        --gap: var(--gutter-11);
    }

    .g-12-xl {
        --gap: var(--gutter-12);
    }

    .g-13-xl {
        --gap: var(--gutter-13);
    }

    .g-14-xl {
        --gap: var(--gutter-14);
    }

    .g-15-xl {
        --gap: var(--gutter-15);
    }

    .g-0-xl,
    .g-1-xl,
    .g-2-xl,
    .g-3-xl,
    .g-4-xl,
    .g-5-xl,
    .g-6-xl,
    .g-7-xl,
    .g-8-xl,
    .g-9-xl,
    .g-10-xl,
    .g-11-xl,
    .g-12-xl,
    .g-13-xl,
    .g-14-xl,
    .g-15-xl {
        gap: var(--gap);
    }
}

2xl styles

gutter/2xl/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-2xl) {
    .g-0-2xl {
        --gap: var(--gutter-0);
    }

    .g-1-2xl {
        --gap: var(--gutter-1);
    }

    .g-2-2xl {
        --gap: var(--gutter-2);
    }

    .g-3-2xl {
        --gap: var(--gutter-3);
    }

    .g-4-2xl {
        --gap: var(--gutter-4);
    }

    .g-5-2xl {
        --gap: var(--gutter-5);
    }

    .g-6-2xl {
        --gap: var(--gutter-6);
    }

    .g-7-2xl {
        --gap: var(--gutter-7);
    }

    .g-8-2xl {
        --gap: var(--gutter-8);
    }

    .g-9-2xl {
        --gap: var(--gutter-9);
    }

    .g-10-2xl {
        --gap: var(--gutter-10);
    }

    .g-11-2xl {
        --gap: var(--gutter-11);
    }

    .g-12-2xl {
        --gap: var(--gutter-12);
    }

    .g-13-2xl {
        --gap: var(--gutter-13);
    }

    .g-14-2xl {
        --gap: var(--gutter-14);
    }

    .g-15-2xl {
        --gap: var(--gutter-15);
    }

    .g-0-2xl,
    .g-1-2xl,
    .g-2-2xl,
    .g-3-2xl,
    .g-4-2xl,
    .g-5-2xl,
    .g-6-2xl,
    .g-7-2xl,
    .g-8-2xl,
    .g-9-2xl,
    .g-10-2xl,
    .g-11-2xl,
    .g-12-2xl,
    .g-13-2xl,
    .g-14-2xl,
    .g-15-2xl {
        gap: var(--gap);
    }
}

3xl styles

gutter/3xl/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-3xl) {
    .g-0-3xl {
        --gap: var(--gutter-0);
    }

    .g-1-3xl {
        --gap: var(--gutter-1);
    }

    .g-2-3xl {
        --gap: var(--gutter-2);
    }

    .g-3-3xl {
        --gap: var(--gutter-3);
    }

    .g-4-3xl {
        --gap: var(--gutter-4);
    }

    .g-5-3xl {
        --gap: var(--gutter-5);
    }

    .g-6-3xl {
        --gap: var(--gutter-6);
    }

    .g-7-3xl {
        --gap: var(--gutter-7);
    }

    .g-8-3xl {
        --gap: var(--gutter-8);
    }

    .g-9-3xl {
        --gap: var(--gutter-9);
    }

    .g-10-3xl {
        --gap: var(--gutter-10);
    }

    .g-11-3xl {
        --gap: var(--gutter-11);
    }

    .g-12-3xl {
        --gap: var(--gutter-12);
    }

    .g-13-3xl {
        --gap: var(--gutter-13);
    }

    .g-14-3xl {
        --gap: var(--gutter-14);
    }

    .g-15-3xl {
        --gap: var(--gutter-15);
    }

    .g-0-3xl,
    .g-1-3xl,
    .g-2-3xl,
    .g-3-3xl,
    .g-4-3xl,
    .g-5-3xl,
    .g-6-3xl,
    .g-7-3xl,
    .g-8-3xl,
    .g-9-3xl,
    .g-10-3xl,
    .g-11-3xl,
    .g-12-3xl,
    .g-13-3xl,
    .g-14-3xl,
    .g-15-3xl {
        gap: var(--gap);
    }
}

4xl styles

gutter/4xl/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-4xl) {
    .g-0-4xl {
        --gap: var(--gutter-0);
    }

    .g-1-4xl {
        --gap: var(--gutter-1);
    }

    .g-2-4xl {
        --gap: var(--gutter-2);
    }

    .g-3-4xl {
        --gap: var(--gutter-3);
    }

    .g-4-4xl {
        --gap: var(--gutter-4);
    }

    .g-5-4xl {
        --gap: var(--gutter-5);
    }

    .g-6-4xl {
        --gap: var(--gutter-6);
    }

    .g-7-4xl {
        --gap: var(--gutter-7);
    }

    .g-8-4xl {
        --gap: var(--gutter-8);
    }

    .g-9-4xl {
        --gap: var(--gutter-9);
    }

    .g-10-4xl {
        --gap: var(--gutter-10);
    }

    .g-11-4xl {
        --gap: var(--gutter-11);
    }

    .g-12-4xl {
        --gap: var(--gutter-12);
    }

    .g-13-4xl {
        --gap: var(--gutter-13);
    }

    .g-14-4xl {
        --gap: var(--gutter-14);
    }

    .g-15-4xl {
        --gap: var(--gutter-15);
    }

    .g-0-4xl,
    .g-1-4xl,
    .g-2-4xl,
    .g-3-4xl,
    .g-4-4xl,
    .g-5-4xl,
    .g-6-4xl,
    .g-7-4xl,
    .g-8-4xl,
    .g-9-4xl,
    .g-10-4xl,
    .g-11-4xl,
    .g-12-4xl,
    .g-13-4xl,
    .g-14-4xl,
    .g-15-4xl {
        gap: var(--gap);
    }
}

5xl styles

gutter/5xl/all.css
/* =========================================================================== *
   All directions gutter utilities
 * =========================================================================== */

@media (--m-5xl) {
    .g-0-5xl {
        --gap: var(--gutter-0);
    }

    .g-1-5xl {
        --gap: var(--gutter-1);
    }

    .g-2-5xl {
        --gap: var(--gutter-2);
    }

    .g-3-5xl {
        --gap: var(--gutter-3);
    }

    .g-4-5xl {
        --gap: var(--gutter-4);
    }

    .g-5-5xl {
        --gap: var(--gutter-5);
    }

    .g-6-5xl {
        --gap: var(--gutter-6);
    }

    .g-7-5xl {
        --gap: var(--gutter-7);
    }

    .g-8-5xl {
        --gap: var(--gutter-8);
    }

    .g-9-5xl {
        --gap: var(--gutter-9);
    }

    .g-10-5xl {
        --gap: var(--gutter-10);
    }

    .g-11-5xl {
        --gap: var(--gutter-11);
    }

    .g-12-5xl {
        --gap: var(--gutter-12);
    }

    .g-13-5xl {
        --gap: var(--gutter-13);
    }

    .g-14-5xl {
        --gap: var(--gutter-14);
    }

    .g-15-5xl {
        --gap: var(--gutter-15);
    }

    .g-0-5xl,
    .g-1-5xl,
    .g-2-5xl,
    .g-3-5xl,
    .g-4-5xl,
    .g-5-5xl,
    .g-6-5xl,
    .g-7-5xl,
    .g-8-5xl,
    .g-9-5xl,
    .g-10-5xl,
    .g-11-5xl,
    .g-12-5xl,
    .g-13-5xl,
    .g-14-5xl,
    .g-15-5xl {
        gap: var(--gap);
    }
}

How to import into your CSS​

Source CSS​

Default styles​

3xs styles​

2xs styles​

xs styles​

sm styles​

md styles​

lg styles​

xl styles​

2xl styles​

3xl styles​

4xl styles​

5xl styles​