Grid

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Divider

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Small

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Divider

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Medium

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Divider

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Large

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Divider

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Collapse

1-2
1-2
1-2-M
1-2-L
1-2-L
1-4-M
…
…
1-4-M
1-2-L
…
1-2-L
1-2-M
1-2-M
1-2-M
1-2-M
1-4-M
1-4-M
1-5-M
1-5-M
3-5-M
Auto-M
1-3-M
Expand-M

Column and Row

Small / Large

1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M

Medium / Small

1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M
1-4-M

Divider

Order

First
Second
Third
Last
First
Second
Third
Last

Wrap + Order

First
Last
…
…
Wrap
First
Last
…
…
Wrap
First
…
…
Last
Wrap
First
Last
…
…
Wrap

Stack

First
Second
Last

Align

First
Second
Third
Forth
Fifth
Last

JavaScript Options

Option Value Default Description
margin String uk-grid-margin This class is added to items that break into the next row, typically to create margin to the previous row.
first-column String uk-first-column This class is added to the first element in each row.
masonry Boolean, String false Enables masonry layout for this grid (pack, next).
parallax Number 0 Parallax translation value. The value can be in vh, % and px. Falsy disables the parallax effect (default).
parallax-start Length 0 Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the grid's top border and viewport's bottom border intersect.
parallax-end Length 0 End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the grid's bottom border and the viewport's top border intersect.
parallax-justify Boolean false With parallax enabled, all columns will reach the bottom at the same time.