PostCSS Gutters
Apply gutters between any child element of any container element.
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
- 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.