Grid
Create a fully responsive, fluid and nestable grid layouts.
Basic usage
Often cards from the Card component are used inside a grid. This also goes for the following examples for visualization.
Gutter modifier
Nested grid
You can easily extend your grid layout with nested grids, just insert one grid stack inside another.
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.
Width and custom grid
The custom grid allows for great flexibility when determining the column widths, here are just a few examples:
Auto and 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. |
Masonry
If grid cells have different heights, a layout free of gaps can be created by opting for grid masonry.