PostCSS Gap Properties

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

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

1.standard-grid {
2	display: grid;
3	gap: 20px;
4}
5
6.spaced-grid {
7	display: grid;
8	column-gap: 40px;
9	row-gap: 20px;
10}
11
12/* becomes */
13
14.standard-grid {
15	display: grid;
16	grid-gap: 20px;
17	gap: 20px;
18}
19
20.spaced-grid {
21	display: grid;
22	grid-column-gap: 40px;
23	column-gap: 40px;
24	grid-row-gap: 20px;
25	row-gap: 20px;
26}

Usage

Add PostCSS Gap Properties to your project:

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

Use it as a PostCSS plugin:

1const postcss = require('postcss');
2const postcssGapProperties = require('postcss-gap-properties');
3
4postcss([
5	postcssGapProperties(/* pluginOptions */)
6]).process(YOUR_CSS /*, processOptions */);

Options

preserve

The preserve option determines whether the original notation is preserved. By default, it is preserved.

1postcssGapProperties({ preserve: false })

1.standard-grid {
2	display: grid;
3	gap: 20px;
4}
5
6.spaced-grid {
7	display: grid;
8	column-gap: 40px;
9	row-gap: 20px;
10}
11
12/* becomes */
13
14.standard-grid {
15	display: grid;
16	grid-gap: 20px;
17}
18
19.spaced-grid {
20	display: grid;
21	grid-column-gap: 40px;
22	grid-row-gap: 20px;
23}