https://github.com/fullengineer/postcss-grid-reset
PostCSS plugin for resetting CSS Grid.
https://github.com/fullengineer/postcss-grid-reset
Last synced: 3 months ago
JSON representation
PostCSS plugin for resetting CSS Grid.
- Host: GitHub
- URL: https://github.com/fullengineer/postcss-grid-reset
- Owner: fullengineer
- Created: 2024-08-21T18:05:52.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-21T18:21:21.000Z (10 months ago)
- Last Synced: 2025-01-14T15:23:30.372Z (5 months ago)
- Language: JavaScript
- Homepage:
- Size: 91.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# PostCSS Grid Reset
[postcss]: https://github.com/postcss/postcss
[PostCSS] plugin for resetting CSS Grid. This plugin adds rule `min-width:0` to all direct descendants of element `display: grid`.
[postcss]: https://github.com/postcss/postcss
```css
.foo {
display: grid;
}
```
```css
.foo {
display: grid;
}
.foo > * {
min-width: 0;
}
```
## 🔗 Links:
- [Preventing a Grid Blowout](https://css-tricks.com/preventing-a-grid-blowout/)
- [Prevent content from expanding grid items](https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items)
## 🍳 Usage
**Step 1:** Install plugin:
```sh
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:
```diff
module.exports = {
plugins: [
+ require('postcss-grid-reset'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage
## License
MIT