README
PostCSS Gap Polyfill
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.