SMART CSS GRID
Minimal Responsive Grid System
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
1
2
3
4
1
2
3
1
2
1
Lightweight, only 0,5 Kb gzipped
No unnecessary div nesting
Based on CSS Grid
Responsive
12 column system
Simple syntax
Simple naming system
five
seven
nine
three
four
two
two
four
You can also merge rows
four
four
four
four
four
four
Flexible & Fluid
Choose any main width and the grid will auto adapt. Example: 90%, 960xp, 10em or whatever you want.
Swapping Places
Super useful when you working with media queries. You can reorder anything. In this example we used: "grid-row: 20; grid-column: 4 / 7;" to bring 4 column to 2 place.
1
2
3
4
1
2
3
4
5
6
Nested
You probably never gonna need nested columns with the CSS Grid, but if you do use the class .nested and you have 12 columns inside any other column.
Six
Six
Four
Four
Four
Summary
Smart Grid is CSS fluid responsive layout system with 12 columns and it is only 0.5 KB. Clear syntax. No unnecessary div nesting, meaning you will write less HTML. It works in any browser that support the CSS Grid.