Typo Grid

Grid Typography

Columns

.col-1

.col-2

.col-1

.col-3

.col-1

.col-4

.col-1

.col-5

.col-1

.col-6

.col-1

.col-7

.col-1

.col-8

.col-1

.col-9

.col-1

.col-10

Left Offset

.col-9.left-1

.col-8.left-2

.col-7.left-3

.col-6.left-4

.col-5.left-5

.col-4.left-6

.col-3.left-7

.col-2.left-8

.col-1.left-9

Right Offset

.col-1.right-1

.col-8

.col-1.right-2

.col-7

.col-1.right-3

.col-6

.col-1.right-4

.col-5

.col-1.right-5

.col-4

.col-1.right-6

.col-3

.col-1.right-7

.col-2

.col-1.right-8

.col-1

.col-1.right-9

Auto Fill Size

.col-fill.left-1

.col-fill.left-2

.col-fill.left-3

.col-fill.left-4

.col-fill.left-5

.col-fill.left-6

.col-fill.left-7

.col-fill.left-8

.col-fill.left-9

.col-fill.right-1

.col-fill.right-2

.col-fill.right-3

.col-fill.right-4

.col-fill.right-5

.col-fill.right-6

.col-fill.right-7

.col-fill.right-8

.col-fill.right-9

Nested rows

.row .col-9

.row .col-8

.row .col-7

.row .col-6

.row .col-5

.row .col-4

.row .col-3

.row .col-2

.row > .col-2

.col-2

.col-1.left-1.right-2

.col-1

Nesting Nesting Nesting

.col-1

.col1

Grow left

.col-1

.grow.grow-left-1

.col-1

.grow.grow-left-2

.col-1

.grow.grow-left-3

.col-1

.grow.grow-left-4

.col-1

.grow.grow-left-5

.col-1

.grow.grow-left-6

.col-1

.grow.grow-left-7

.col-1

.grow.grow-left-8

.col-1

.grow.grow-left-9

.col-1

.col-2

.grow.grow-left-1

.col-2

.grow.grow-left-2

.col-2

.grow.grow-left-3

.col-2

.grow.grow-left-4

.col-2

.grow.grow-left-5

.col-2

.grow.grow-left-6

.col-2

.grow.grow-left-7

.col-2

.grow.grow-left-8

.col-2

.col-3

.grow.grow-left-1

.col-3

.grow.grow-left-2

.col-3

.grow.grow-left-3

.col-3

.grow.grow-left-4

.col-3

.grow.grow-left-5

.col-3

.grow.grow-left-6

.col-3

.grow.grow-left-7

.col-3

.col-4

.grow.grow-left-1

.col-4

.grow.grow-left-2

.col-4

.grow.grow-left-3

.col-4

.grow.grow-left-4

.col-4

.grow.grow-left-5

.col-4

.grow.grow-left-6

.col-4

.col-5

.grow.grow-left-1

.col-5

.grow.grow-left-2

.col-5

.grow.grow-left-3

.col-5

.grow.grow-left-4

.col-5

.grow.grow-left-5

.col-5

.col-6

.grow.grow-left-1

.col-6

.grow.grow-left-2

.col-6

.grow.grow-left-3

.col-6

.grow.grow-left-4

.col-6

.col-7

.grow.grow-left-1

.col-7

.grow.grow-left-2

.col-7

.grow.grow-left-3

.col-7

.col-8

.grow.grow-left-1

.col-8

.grow.grow-left-2

.col-8

.col-9

.grow.grow-left-1

.col-9

Grow right

.col-1

.grow.grow-right-1

.col-1

.grow.grow-right-2

.col-1

.grow.grow-right-3

.col-1

.grow.grow-right-4

.col-1

.grow.grow-right-5

.col-1

.grow.grow-right-6

.col-1

.grow.grow-right-7

.col-1

.grow.grow-right-8

.col-1

.grow.grow-right-9

.col-1

.col-2

.grow.grow-right-1

.col-2

.grow.grow-right-2

.col-2

.grow.grow-right-3

.col-2

.grow.grow-right-4

.col-2

.grow.grow-right-5

.col-2

.grow.grow-right-6

.col-2

.grow.grow-right-7

.col-2

.grow.grow-right-8

.col-2

.col-3

.grow.grow-right-1

.col-3

.grow.grow-right-2

.col-3

.grow.grow-right-3

.col-3

.grow.grow-right-4

.col-3

.grow.grow-right-5

.col-3

.grow.grow-right-6

.col-3

.grow.grow-right-7

.col-3

.col-4

.grow.grow-right-1

.col-4

.grow.grow-right-2

.col-4

.grow.grow-right-3

.col-4

.grow.grow-right-4

.col-4

.grow.grow-right-5

.col-4

.grow.grow-right-6

.col-4

.col-5

.grow.grow-right-1

.col-5

.grow.grow-right-2

.col-5

.grow.grow-right-3

.col-5

.grow.grow-right-4

.col-5

.grow.grow-right-5

.col-5

.col-6

.grow.grow-right-1

.col-6

.grow.grow-right-2

.col-6

.grow.grow-right-3

.col-6

.grow.grow-right-4

.col-6

.col-7

.grow.grow-right-1

.col-7

.grow.grow-right-2

.col-7

.grow.grow-right-3

.col-7

.col-8

.grow.grow-right-1

.col-8

.grow.grow-right-2

.col-8

.col-9

.grow.grow-right-1

.col-9

Nested columns

.col-1

.col-1.grow.grow-left-1

.col-1

.col-2.grow.grow-left-2

.col-1

.col-3.grow.grow-left-3

.col-1

.col-4.grow.grow-left-4

.col-1

.col-5.grow.grow-left-5

.col-1

.col-6.grow.grow-left-6

.col-1

.col-7.grow.grow-left-7

.col-1

.col-8.grow.grow-left-8

.col-1

.col-9.grow.grow-left-9

.col-1

.col-2

.col-1.grow.grow-left-1

.col-2

.col-2.grow.grow-left-2

.col-2

.col-3.grow.grow-left-3

.col-2

.col-4.grow.grow-left-4

.col-2

.col-5.grow.grow-left-5

.col-2

.col-6.grow.grow-left-6

.col-2

.col-7.grow.grow-left-7

.col-2

.col-8.grow.grow-left-8

.col-2

.col-3

.col-1.grow.grow-left-1

.col-3

.col-2.grow.grow-left-2

.col-3

.col-3.grow.grow-left-3

.col-3

.col-4.grow.grow-left-4

.col-3

.col-5.grow.grow-left-5

.col-3

.col-6.grow.grow-left-6

.col-3

.col-7.grow.grow-left-7

.col-3

.col-4

.col-1.grow.grow-left-1

.col-4

.col-2.grow.grow-left-2

.col-4

.col-3.grow.grow-left-3

.col-4

.col-4.grow.grow-left-4

.col-4

.col-5.grow.grow-left-5

.col-4

.col-6.grow.grow-left-6

.col-4

.col-5

.col-1.grow.grow-left-1

.col-5

.col-2.grow.grow-left-2

.col-5

.col-3.grow.grow-left-3

.col-5

.col-4.grow.grow-left-4

.col-5

.col-5.grow.grow-left-5

.col-5

.col-6

.col-1.grow.grow-left-1

.col-6

.col-2.grow.grow-left-2

.col-6

.col-3.grow.grow-left-3

.col-6

.col-4.grow.grow-left-4

.col-6

.col-7

.col-1.grow.grow-left-1

.col-7

.col-2.grow.grow-left-2

.col-7

.col-3.grow.grow-left-3

.col-7

.col-8

.col-1.grow.grow-left-1

.col-8

.col-2.grow.grow-left-2

.col-8

.col-9

.col-1.grow.grow-left-1

.col-9

Nested columns 2

.col-1

.col-1.grow.grow-right-1

.col-1

.col-2.grow.grow-right-2

.col-1

.col-3.grow.grow-right-3

.col-1

.col-4.grow.grow-right-4

.col-1

.col-5.grow.grow-right-5

.col-1

.col-6.grow.grow-right-6

.col-1

.col-7.grow.grow-right-7

.col-1

.col-8.grow.grow-right-8

.col-1

.col-9.grow.grow-right-9

.col-1

.col-2

.col-1.grow.grow-right-1

.col-2

.col-2.grow.grow-right-2

.col-2

.col-3.grow.grow-right-3

.col-2

.col-4.grow.grow-right-4

.col-2

.col-5.grow.grow-right-5

.col-2

.col-6.grow.grow-right-6

.col-2

.col-7.grow.grow-right-7

.col-2

.col-8.grow.grow-right-8

.col-2

.col-3

.col-1.grow.grow-right-1

.col-3

.col-2.grow.grow-right-2

.col-3

.col-3.grow.grow-right-3

.col-3

.col-4.grow.grow-right-4

.col-3

.col-5.grow.grow-right-5

.col-3

.col-6.grow.grow-right-6

.col-3

.col-7.grow.grow-right-7

.col-3

.col-4

.col-1.grow.grow-right-1

.col-4

.col-2.grow.grow-right-2

.col-4

.col-3.grow.grow-right-3

.col-4

.col-4.grow.grow-right-4

.col-4

.col-5.grow.grow-right-5

.col-4

.col-6.grow.grow-right-6

.col-4

.col-5

.col-1.grow.grow-right-1

.col-5

.col-2.grow.grow-right-2

.col-5

.col-3.grow.grow-right-3

.col-5

.col-4.grow.grow-right-4

.col-5

.col-5.grow.grow-right-5

.col-5

.col-6

.col-1.grow.grow-right-1

.col-6

.col-2.grow.grow-right-2

.col-6

.col-3.grow.grow-right-3

.col-6

.col-4.grow.grow-right-4

.col-6

.col-7

.col-1.grow.grow-right-1

.col-7

.col-2.grow.grow-right-2

.col-7

.col-3.grow.grow-right-3

.col-7

.col-8

.col-1.grow.grow-right-1

.col-8

.col-2.grow.grow-right-2

.col-8

.col-9

.col-1.grow.grow-right-1

.col-9

Alignment

.align-start

.align-center

.align-end

.align-start.col-2
.align-start.col-2
.align-start.col-2

.align-start.col-2

.align-center.col-2
.align-center.col-2
.align-center.col-2

.align-center.col-2

.align-end.col-2
.align-end.col-2
.align-end.col-2

.align-end.col-2

.align-baseline.col-2
.align-baseline.col-2
.align-baseline.col-2