postcss-gap-polyfilldeprecated

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

Usage no npm install needed!

<script type="module">
  import postcssGapPolyfill from 'https://cdn.skypack.dev/postcss-gap-polyfill';
</script>

README

PostCSS Gap Polyfill

NPM Version Linux Build Status Windows Build Status Gitter Chat

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

🙋 Looking for people to help test.

Example:

.container {
    display: flex;
    gap: 40px;
}

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);
}

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

npm install postcss-gutters --save-dev

Browsers

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