PostCSS Gap Polyfill

A polyfill for adding gap between flex items, following the CSS Gap specification.

🙋 Looking for people to help test.

Example:

1.container {
2    display: flex;
3    gap: 40px;
4}
5

Output:

1/* Output simplified for example */
2
3.container > * {
4    --gutters_parent: 40px !important;
5    --gutters_item: 40px !important;
6    --gutters: var(--gutters_item) !important;
7    margin-top: var(--gutters);
8    margin-left: var(--gutters);
9}
10
11.container {
12    --gutters_container: calc(var(--gutters_parent, 0px) - 40px) !important;
13    --gutters: var(--gutters_container);
14    margin-top: var(--gutters);
15    margin-left: var(--gutters);
16}

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 (support for margins coming soon)
• Works well with responsive design
• Gutters don't have to be even numbers
• Style borders and padding as normal
• Partial support for percentages (Tempermental)

Setup

1npm install postcss-gutters --save-dev

Browsers

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