fullengineer/postcss-grid-reset

PostCSS plugin for resetting CSS Grid.

PostCSS Grid Reset

PostCSS plugin for resetting CSS Grid. This plugin adds rule min-width:0 to all direct descendants of element display: grid.

.foo {
  display: grid;
}

.foo {
  display: grid;
}

.foo > * {
  min-width: 0;
}

🔗 Links:

• Preventing a Grid Blowout
• Prevent content from expanding grid items

🍳 Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-grid-reset

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-grid-reset'),
    require('autoprefixer')
  ]
}

License

MIT