Skip to main content

Gutters

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

There are three types of gutter styles.

  1. Both horizontal and vertical gutters
    This will set the --gap variable to the specified value and set the gap style on an element.
  2. Horizontal gutters
    This will set the --gap variable to the specified value and set the column-gap style on an element.
  3. Vertical gutters
    This will set the --row-gap variable to the specified value and set the row-gap style on an element.

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

Combined imports​

If you will use all of the gutter sizes then you can use the combined import file.

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

Imports are available for all media query viewport sizes.

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