postcss-gap-properties
Advanced tools
Weekly downloads
Readme
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-dev
Use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssGapProperties = require('postcss-gap-properties');
postcss([
postcssGapProperties(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Gap Properties runs in all Node environments, with special instructions for:
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;
}
Use the gap, column-gap, and row-gap shorthand properties in CSS
The npm package postcss-gap-properties receives a total of 7,017,617 weekly downloads. As such, postcss-gap-properties popularity was classified as popular.
We found that postcss-gap-properties demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.