Skip to main content

Gutters - horizontal

These gutter styles handle the gaps between flexbox and grid columns.

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

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

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

How to import into your CSS​

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS​

Default styles​

gutter/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3xs styles​

gutter/3xs/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2xs styles​

gutter/2xs/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xs styles​

gutter/xs/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sm styles​

gutter/sm/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

md styles​

gutter/md/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

lg styles​

gutter/lg/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xl styles​

gutter/xl/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2xl styles​

gutter/2xl/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3xl styles​

gutter/3xl/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4xl styles​

gutter/4xl/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5xl styles​

gutter/5xl/horizontal.css
/* =========================================================================== *
   Horizontal gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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