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.