Width

Define the width of elements for different viewport sizes.

Basic usage

Below are just a few examples on how to build a Grid using the Width stacks.
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
Width 1-6
Width 5-6

Auto and expand

Auto
1-3
Expand

Fixed width

Define the fixed width of elements.
OPTIONDESCRIPTION
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

Using classes

Optionally we can also use one of the Width classes directly to a stack element to determine its size.
CLASSDESCRIPTION
uk-width-1-1
Fills 100% of the available width.
uk-width-1-2
The element takes up halves of its parent container.
uk-width-1-3, uk-width-2-3
The element takes up thirds of its parent container.
uk-width-1-4, uk-width-3-4
The element takes up fourths of its parent container.
uk-width-1-5, uk-width-2-5,
uk-width-3-5, uk-width-4-5
The element takes up fifths of its parent container.
uk-width-1-6, uk-width-5-6
The element takes up sixths of its parent container.