A highly customizable grid layout based on the native CSS-Grid specifications.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
dist
src
.gitignore
README.md

README.md

Vanilla CSS-Grid Grid layout

A highly customizable grid layout based on the native CSS-Grid specifications.

Basic Q&A:

Q: What the heck is CSS-Grid?

A: Discover the basic concepts here (MDN)!

Q: What is available by default?

A: This library is fully working out-of-the-box and it ships with the Bootstrap 4 configuration (more here)!

Q: How could this help me?

A: Here some reasons:

  • It's (hopefully) simple and straightforward
  • It's based on native CSS specs created for the purpose === no CSS 'hacks' used!
  • It's highly customizable. Need to change the breakpoints or the class-names? It's just a matter of seconds
  • It's ultra-light-weight, just ~3KB (uncompressed)!
  • It's just the good old grid, nothings else that you may not need ;)



CSS-Grid image

show me the stuff



How-to customize:

  • You can customize breakpoints, spacings, number of columns, class-names, and more!
  • Just change the SASS configuration variables in the _grid.scss source file.

How-to import in your flow:

  • Just add this to your main .SCSS file: @import /path/to/_grid.scss.

How-to compile standalone:

  • Just run sass _grid.scss:grid.css in the file directory. (SASS CLI required, how to install SASS)
  • If you don't need any additional change to the default configuration, just import the already-compiled grid.css file.