A few simple demos. Resize your browser window to see the behaviour. Also view the html source to see how it works.

Full 12 column grid

No gutter

zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col03
zp-col03
zp-col03
zp-col03
zp-col04
zp-col04
zp-col04
zp-col05
zp-col07
zp-col06
zp-col06
zp-col07
zp-col05
zp-col08
zp-col04
zp-col09
zp-col03
zp-col10
zp-col02
zp-col11
zp-col01
zp-col12
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-2
zp-col5th-3
zp-col5th-1
zp-col5th-4

2% gutter

zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col03
zp-col03
zp-col03
zp-col03
zp-col04
zp-col04
zp-col04
zp-col05
zp-col07
zp-col06
zp-col06
zp-col07
zp-col05
zp-col08
zp-col04
zp-col09
zp-col03
zp-col10
zp-col02
zp-col11
zp-col01
zp-col12
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-2
zp-col5th-3
zp-col5th-1
zp-col5th-4

4% gutter

zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col01
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col03
zp-col03
zp-col03
zp-col03
zp-col04
zp-col04
zp-col04
zp-col05
zp-col07
zp-col06
zp-col06
zp-col07
zp-col05
zp-col08
zp-col04
zp-col09
zp-col03
zp-col10
zp-col02
zp-col11
zp-col01
zp-col12
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-1
zp-col5th-2
zp-col5th-3
zp-col5th-1
zp-col5th-4

Rows/wrapping zp-columns

Even rows don't need any row wrapper

zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02

zp-clearfix

zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col10

.zp-row wrapper for even rows

zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col06
zp-col06

Changing columns

Changing even columns to even columns wihtout .zp-row

zp-col02
zp-col02
zp-col02 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no s
zp-col02 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
zp-col02
zp-col02

Changing even zp-columns to uneven (and vice versa) without .zp-row

zp-col02 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no s
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
zp-col06
zp-col06

Full width

zp-col02
zp-col02
zp-col02
zp-col02
zp-col02
zp-col02

Changing float order

left
right

Tables

The colums of course also work with table elements.

zp-col03 zp-col03 zp-col03 zp-col03
Lorem ipsum dolor sit amet onsetetur sadipscing elitr invidunt ut labore et dolore magna aliquyam erat
Lorem ipsum dolor sit amet onsetetur sadipscing elitr invidunt ut labore et dolore magna aliquyam erat
top