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.
.standard-grid {
display: grid;
gap: 20px;
}
.spaced-grid {
display: grid;
column-gap: 40px;
row-gap: 20px;
}
/* becomes */
.standard-grid {
display: grid;
grid-gap: 20px;
gap: 20px;
}
.spaced-grid {
display: grid;
grid-column-gap: 40px;
column-gap: 40px;
grid-row-gap: 20px;
row-gap: 20px;
}Add PostCSS Gap Properties to your project:
npm install postcss postcss-gap-properties --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssGapProperties = require('postcss-gap-properties');
postcss([
postcssGapProperties(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);The preserve option determines whether the original notation
is preserved. By default, it is preserved.
postcssGapProperties({ preserve: false }).standard-grid {
display: grid;
gap: 20px;
}
.spaced-grid {
display: grid;
column-gap: 40px;
row-gap: 20px;
}
/* becomes */
.standard-grid {
display: grid;
grid-gap: 20px;
}
.spaced-grid {
display: grid;
grid-column-gap: 40px;
grid-row-gap: 20px;
}