Mantis Grid System
The definitive responsive grid system
Basic
.grid__item-xx--n
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
Offset
.grid__offset-xx--n
1
2
3
4
5
6
7
8
9
10
11
Auto Sizing
.grid__item-xx
6
grow
2
grow
2
.grid__item-xx--auto
6
shrink
2
shrink
2
mixed
grow
shrink
grow
shrink
grow
Nesting
.grid
.grid__item-xx--n
.grid
.grid__item-xx--n
8
8
8
4
4
8
4
4
8
8
4
4
8
4
Alignment
.grid--align-start
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit magnam reiciendis, excepturi voluptatibus.
9
.grid--align-center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit magnam reiciendis, excepturi voluptatibus.
9
.grid--align-end
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit magnam reiciendis, excepturi voluptatibus.
9
.grid--align-stretch
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit magnam reiciendis, excepturi voluptatibus.
9
Justify
.grid--justify-start
3
3
.grid--justify-center
3
3
.grid--justify-end
3
3
.grid--justify-evenly
3
3
3
3
3
.grid--justify-around
3
3
3
3
3
.grid--justify-between
3
3
3
3
3
Ordering
.grid__item-xx--first
1
2
3
4 (first)
.grid__item-xx--last
1 (last)
2
3
4
Row
.grid--row
1
2
3
4
.grid--row-reverse
1
2
3
4
Column
.grid--column
1
2
3
4
.grid--column-reverse
1
2
3
4