Flex Grid

Noah flex grid uses negative margins in order to provide a simpler way of building layouts - without having to wrap each individual element of the grid in an extra column wrapper.

Default

Box
Box
Box

Fluid

Box
Box
Box

Grid Columns

1
2
3
3
Narrow
Auto

Grid Gap

Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box
Box

Align Top Left

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Top Center

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Top Right

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Center Left

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Center Center

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Center Right

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Bottom Left

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Bottom Center

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Align Bottom Right

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Stretch Columns

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2

Stacks Column

Line 1
Line 1
Line 2
Line 3
Line 1
Line 2