PostCSS Gap Polyfill
A polyfill for adding gap between flex items, following the CSS Gap specification.
🙋 Looking for people to help test.
Example:
Output:
/* Output simplified for example */
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.