Grid

Create a fully responsive, fluid and nestable grid layout.


Basic usage

Often cards from the Card component are used inside a grid. This also goes for the following examples for visualization.
Item
Item
Item

Gutter modifier

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Nested grid

Item
Item
Item

Divider modifier

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Match height

To expand all children of a container to the same height regardless of their content, use the height-match option. You can change the height matching behavior by setting the target or row option. Default target class is uk-card, relating to the Card element and stack, but you can use other elements classes or even your own custom class.
Item
Item
...
Item
...
...

Custom width

The custom grid allows for great flexibility when determining the column widths, here are just a few examples:
Width 1-1
Width 1-5
Width 4-5
Width 1-4
Width 3-4
Width 1-3
Width 2-3
Width 3-5
Width 2-5
Width 1-5
Width 1-5
Width 2-5
Width 1-5
Width 1-6
Width 1-6
Width 1-6
Width 1-6
Width 1-6
Width 1-6

Auto and expand

Auto
1-3
Expand

Fixed width

Define the fixed width of elements.
OPTION DESCRIPTION
Fixed Small
Applies a fixed width of 150px.
Fixed Medium
Applies a fixed width of 300px.
Fixed Large
Applies a fixed width of 450px.
Fixed XLarge
Applies a fixed width of 600px.
Fixed XXLarge
Applies a fixed width of 750px.
Small
Medium
Large
XLarge
XXLarge

Masonry

If grid cells have different heights, a layout free of gaps can be created by opting for grid masonry.
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Grid parallax

Move single columns of a grid at different speeds while scrolling
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
The parallax effect is also applied if grid columns wrap into the next row, as shown in the next example.
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item