This grid was made for front enders who like simplicity and doesn't like the way that Bootstrap and Foundation handle grid systems. Differently from Bootstrap and Foundation, this grid system avoid multiple screen classes strategy that usually lead the front end into a messed markup.
You can install it using npm or, if you're not confortable with package management, download the code and put it manually in your html:
npm install ggrid --saveThis is the default container for the grid. It sets the maximum width of the grid to 960 pixels.
6 cols
6 cols
Every column should be a direct child of a row.
3 cols
3 cols
3 cols
3 cols
6 cols
6 cols
12 cols
It is possible split a row up to 12 columns.
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
This grid is capable to horizontally offset a column up to 11 times its width.
6 cols
6 cols
3 cols
1 col
The grid also offers a vertical offset. It can offset a row from 10 to 120 pixels.
12 cols
6 cols
9 cols
This grid was designed to allow responsiveness keeping markup as simple and clean as possible. So, its default behavior is to make the grid single column when the screen width is lower than 960 pixels, but it can stay multi-column either on tablets, smartphones or both.
6 cols
6 cols
3 cols
3 cols
3 cols
3 cols
6 cols
6 cols
3 cols
3 cols
3 cols
3 cols
This grid allows nesting. It is completely possible split a column in more columns.
12 cols
6 cols
6 cols
7 cols
3 cols
3 cols
3 cols
3 cols
5 cols
7 cols
5 cols
To contribute on this project, feel free to fork it on Github