Skip to main content

Gutters - vertical

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

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

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

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

How to import into your CSS​

Import this into your CSS with:

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

Imports are available for all media query viewport sizes.

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

See Import Cacao CSS for more information.

Source CSS​

Default styles​

gutter/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3xs styles​

gutter/3xs/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2xs styles​

gutter/2xs/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xs styles​

gutter/xs/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sm styles​

gutter/sm/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

md styles​

gutter/md/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

lg styles​

gutter/lg/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

xl styles​

gutter/xl/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2xl styles​

gutter/2xl/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3xl styles​

gutter/3xl/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4xl styles​

gutter/4xl/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5xl styles​

gutter/5xl/vertical.css
/* =========================================================================== *
   Vertical gutter utilities
 * =========================================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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