PostCSS Gap Properties

PostCSS Gap Properties lets you use the gap, column-gap, and row-gap shorthand properties in CSS, following the CSS Grid Layout specification.

```pcss .standard-grid { gap: 20px; }

.spaced-grid { column-gap: 40px; row-gap: 20px; }

/ becomes /

.standard-grid { grid-gap: 20px; gap: 20px; }

.spaced-grid { grid-column-gap: 40px; column-gap: 40px; grid-row-gap: 20px; row-gap: 20px; } ```

Usage

Add PostCSS Gap Properties to your project:

bash npm install postcss postcss-gap-properties --save-dev

Use PostCSS Gap Properties as a PostCSS plugin:

```js import postcss from 'postcss'; import postcssGapProperties from 'postcss-gap-properties';

postcss([ postcssGapProperties(/ pluginOptions /) ]).process(YOUR_CSS /, processOptions /); ```

PostCSS Gap Properties runs in all Node environments, with special instructions for:

| Node | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- |

Options

preserve

The preserve option determines whether the original gap declaration should remain in the CSS. By default, the original declaration is preserved.