https://github.com/davidperis92/grid-layout-utils
Css grid utility classes
https://github.com/davidperis92/grid-layout-utils
css grid grid-layout utility-classes utils
Last synced: 7 months ago
JSON representation
Css grid utility classes
- Host: GitHub
- URL: https://github.com/davidperis92/grid-layout-utils
- Owner: davidperis92
- License: mit
- Created: 2018-11-08T11:46:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-12T16:06:12.000Z (almost 7 years ago)
- Last Synced: 2025-02-18T16:02:34.911Z (8 months ago)
- Topics: css, grid, grid-layout, utility-classes, utils
- Language: CSS
- Size: 122 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Grid Layout Utils
## Demo
https://davidperis92.github.io/grid-layout-utils/
## Installation
```
> npm install grid-layout-utils
```
## Usage
Include grid-layout.css in your project or import grid-layout.scss to overwrite the config.
## Classes
To use the classes follow the next syntax:
gl- [media query (ex: phone)] - [css property (ex: template-cols)] - [count ex: 5]
```css
/* Examples */
@media (max-width: 767px) {
.gl-phone-template-cols-5 {
grid-template-cols: repeat(5, 1fr);
}
}
.gl-row-6 {
grid-row: span 6;
}
.gl-col-pos-6 {
grid-column: 6;
}
.gl-col-full {
grid-column: 1 / -1;
}
```
## Developers
use gulp to develop:
```
> gulp
```
## License
[MIT](https://opensource.org/licenses/MIT)