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.