lattice.css

A responsive flexbox-based CSS grid framework that uses BEM naming conventions. Read the docs →

.grid__col
.grid__col
.grid__col-4
.grid__col-4
.grid__col-4
.grid__col-3
.grid__col-3
.grid__col-3
.grid__col-3
.grid__col-6
.grid__col-6
.grid__col-8
.grid__col-2
.grid__col-2
.grid__col-12

Offsets

.grid__col-3
.grid__col-8.grid__col--offset-1
.grid__col-5
.grid__col-6.grid__col--offset-1
.grid__col-5
.grid__col-4.grid__col--offset-1

Nesting

.grid__col-6
.grid__col-6
.grid__col-6
.grid__col-6
.grid__col-6
.grid__col-6

Fluid

.grid__col-3
.grid__col-3
.grid__col-3
.grid__col-3
.grid__col-4
.grid__col-4
.grid__col-4
.grid__col-6
.grid__col-6

Grid Utilities

.grid--center

.grid__col-6

.grid--justify

.grid__col-3
.grid__col-3
.grid__col-3

.grid--left

.grid__col-4
.grid__col-4

.grid--right

.grid__col-4
.grid__col-4

.grid--top

.grid__col-6
.grid__col-6

.grid--middle

.grid__col-6
.grid__col-6

.grid--bottom

.grid__col-6
.grid__col-6

.grid--stretch

.grid__col-6
.grid__col-6

.grid--no-gutters

.grid__col-4
.grid__col-4
.grid__col-4

Column Utilities

.grid__col--left / .grid__col--right

.grid__col-4.grid__col--left
.grid__col-4.grid__col--right

.grid__col--top / .grid__col--middle / .grid__col--bottom

.grid__col-4.grid__col--top
.grid__col-4.grid__col--middle
.grid__col-4.grid__col--bottom

.grid__col--stretch

.grid__col-4.grid__col--stretch
.grid__col-4
.grid__col-4

.grid__col--no-gutters

.grid__col-4
.grid__col-4.grid__col--no-gutters
.grid__col-4

.grid__col--hidden / .grid__col--visible

.grid__col-6.grid__col--hidden
.grid__col-6.grid__col--visible

.grid__col--order-{number}

.grid__col-4.grid__col--order-3
.grid__col-4.grid__col--order-2
.grid__col-4.grid__col--order-1

.grid__col--order-first / .grid__col--order-last

.grid__col-3.grid__col--order-last
.grid__col-3
.grid__col-3
.grid__col-3.grid__col--order-first