https://github.com/stackrole/css-grid-utility
A simple CSS Grid utility library built with SCSS
https://github.com/stackrole/css-grid-utility
Last synced: 8 months ago
JSON representation
A simple CSS Grid utility library built with SCSS
- Host: GitHub
- URL: https://github.com/stackrole/css-grid-utility
- Owner: stackrole
- License: mit
- Created: 2020-05-23T07:17:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-23T10:57:38.000Z (about 6 years ago)
- Last Synced: 2025-08-13T03:36:52.499Z (10 months ago)
- Language: CSS
- Homepage: https://cssgrid.stackrole.com/
- Size: 9.77 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Grid Utility
A simple CSS Grid utility library built with SCSS. Creates 3 columns by deafult for . Follows bootstrap media query breakpoints and it mobile first. This does not add any presentational CSS, just CSS grid template columns with grid-gap.
Just include the [css-grid-utilicy.css](https://github.com/stackrole/css-grid-utility/blob/master/css-grid-utility.css) or [css-grid-utilicy.scss](https://github.com/stackrole/css-grid-utility/blob/master/scss/css-grid-utility.scss) file into you project and Start using it.
---
## Let create simple CSS grid that create 3 columns.
```html
Content
Content
Content
```
### How about CSS grids that is 1 column in mobile, 2 in tablet and 3 in destkop
```html
Content
Content
Content
```
As this is my version of adoptation from bootstrap breakpoint. A copy-paste of same, take a look
| | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
|-|-|-|-|-|-|
| Class prefix | .col- | .sm- | .md- | .lg- | .xl- |
| # of Columns | 3 |
| Grid Gap | 2rem |
If you like this utility library, Feel free to use it in your project. Happy to recieve feedback and contributions ofcourse :)