PostCSS Justify Gap

PostCSS plugin for simple gaps.

Input

justify-gap receive two arguments with separator /:

• columns <Number>
• gap <Number><Unit>

.parent {
  display: flex;
  flex-wrap: wrap;
}

.children {
  height: 100px;
  justify-gap: 4/10px;
}

@media screen and (max-width: 1024px) {
  .children {
    justify-gap: 2/10%;
  }
}

@media screen and (max-width: 600px) {
  .children {
    justify-gap: 1/40px;
  }
}

Output

.parent {
  display: flex;
  flex-wrap: wrap;
}

.children {
  height: 100px;
}

.children:nth-child(n) {
  margin: 0;
  flex-basis: calc(25% - 7.5px);
}

.children:not(:nth-child(4n)) {
  margin-right: 10px;
}

.children:nth-last-child(n+5) {
  margin-bottom: 10px;
}

@media screen and (max-width: 1024px) {
  .children:nth-child(n) {
    margin: 0;
    flex-basis: calc(50% - 5%);
  }
  .children:not(:nth-child(2n)) {
    margin-right: 10%;
  }
  .children:nth-last-child(n+3) {
    margin-bottom: 10%;
  }
}

@media screen and (max-width: 600px) {
  .children:nth-child(n) {
    margin: 0;
    flex-basis: 100%;
  }
  .children:nth-last-child(n+2) {
    margin-bottom: 40px;
  }
}

Usage

Step 1: Install plugin:

npm

npm install --save-dev postcss postcss-justify-gap

yarn

yarn add -D postcss postcss-justify-gap

Step 2: Add the plugin to plugins list:

postcss([ require('postcss-justify-gap') ]);