PostCSS Gutters

Apply gutters between any child element of any container element.

Example:

.container {
    gutters: 40px;
}
 
.item {
    width: 50%;
}
 

Output:

/* Output simplified for example */
 
.container > * {
    --gutters_parent: 40px !important;
    --gutters_item: 40px !important;
    --gutters: var(--gutters_item) !important;
    margin-top: var(--gutters);
    margin-left: var(--gutters);
}
 
.container {
    --gutters_container: calc(var(--gutters_parent, 0px) - 40px) !important;
    --gutters: var(--gutters_container);
    margin-top: var(--gutters);
    margin-left: var(--gutters);
}
 
.item {
    --width: calc(50% - var(--gutters_item, var(--gutters_container, 0%))) !important
    width: var(--width);
}

You can view several examples of it in action.

It works by adding margins to each child element and recalculating their widths and applying a negative margin to the container.

• Works with unlimited nested elements
• No additional class names or divs needed
• Use with or without a wrapper div
• Works well with responsive design
• Gutters don't have to be even numbers
• Style borders and padding as normal
• Supports percentages (Note on flex containers they behave inconsistently amongst browsers)

Setup

npm install postcss-gutters --save-dev

Browsers

Supports all current modern browsers, Edge, Firefox, Chrome, Safari, Opera.