Quaff

Grid system

Quaff provides a responsive 12-column CSS grid. Use row for the container and col-* for its children. For flex layouts, alignment, sizing, and spacing, see CSS helpers.

col-xs-12 col-md-6 col-lg-3

Gutter

You can add space between your columns using the q-gutter-* classes, where * is either xs, sm, md, lg, xl or none. Use q-gutter-x-* or q-gutter-y-* when spacing should only apply in one axis. The q-col-gutter-* names are supported as compatibility aliases for row grids.

xs

col-6

col-4

col-3

sm

col-6

col-4

col-3

md

col-6

col-4

col-3

lg

col-6

col-4

col-3

xl

col-6

col-4

col-3

none

col-6

col-4

col-3

Directional Gutter

The following example uses q-col-gutter-x-md with q-col-gutter-y-sm:

col-6

Breakpoints

Grid classes use the MD3 window sizes below, matching Quaff.screen. See adaptive layouts for navigation and list/detail examples.

xs 0-599px
sm 600-839px
md 840-1199px
lg 1200-1599px
xl 1600px and larger