Create a multi-column, dynamic grid layout whose items can be sorted and filtered.
The Dynamic Grid component allows you to create a dynamic and responsive grid layout utilizing the Grid component. Grid items will arrange themselves fluently and seamlessly for a gap-free multi-column layout on all device sizes.
Usage
To apply this component, add the data-uk-grid
attribute to the container element. Set the width of the grid items by using the uk-width-*
or .uk-grid-width-*
classes from the Grid component.
Example
Markup
<!-- This is a grid using uk-width-* on each item -->
<div data-uk-grid>
<div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
<div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
</div>
<!-- This is a grid using uk-grid-width-* on the grid itself -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid>
<div>...</div>
<div>...</div>
</div>
Grid Gutter
Divide grid items with a gutter by adding the {gutter: 20}
option to the data attribute. In this case the gutter will be 20px wide.
Example
Markup
<div data-uk-grid="{gutter: 20}">...</div>
Filtering
You can also filter your grid so that only particular items will be displayed. To do so, add the {controls: '#my-id'}
option to the data-attribute to target the id for the filter controls. Each control needs to have the data-uk-filter
attribute to define the category you want to filter. Then you also need to add the data-uk-filter
attribute to each grid item to define what category the item belongs to. Separate multiple categories by comma.
Example
Markup
This example is using a Subnav to filter the items.
<!-- Filter Controls -->
<ul id="my-id" class="uk-subnav">
<li data-uk-filter=""><a href=""></a></li>
<li data-uk-filter="filter-a"><a href=""></a></li>
<li data-uk-filter="filter-b"><a href=""></a></li>
</ul>
<!-- Dynamic Grid -->
<div data-uk-grid="{controls: '#my-id'}">
<div data-uk-filter="filter-a">...</div>
<div data-uk-filter="filter-b">...</div>
<div data-uk-filter="filter-a,filter-b">...</div>
</div>
Sorting
To sort grid items ascendingly, add the {controls: '#my-id'}
option to the data-attribute to target the id for the sorting controls.
Each control needs to have the data-uk-sort
attribute with a custom value that targets the category you want to be sorted, for example data-uk-sort="my-category"
. You also need to add a data attribute to each grid item, using your target category’s name. The value contains the data which should be sorted, for example data-my-category="my-data"
.
Items are sorted ascendingly by default. To sort the items descendingly just add :desc
to the value of the controls’ data attribute, for example data-uk-sort="my-category:desc"
.
Example
Markup
<ul id="my-id" class="uk-subnav">
<li data-uk-sort="my-category"><a href=""></a></li>
<li data-uk-sort="my-category:desc"><a href=""></a></li>
</ul>
<div data-uk-grid="{controls: '#my-id'}">
<div data-my-category="a">...</div>
<div data-my-category="b">...</div>
</div>
Multiple categories
To use more than one category to sort grid items, use a different name for each category.
Markup
<ul id="my-id" class="uk-subnav">
<li data-uk-sort="my-category"><a href=""></a></li>
<li data-uk-sort="my-category:desc"><a href=""></a></li>
<li data-uk-sort="my-category2"><a href=""></a></li>
<li data-uk-sort="my-category2:desc"><a href=""></a></li>
</ul>
<div data-uk-grid="{controls: '#my-id'}">
<div data-my-category="a" data-my-category2="8">...</div>
<div data-my-category="b" data-my-category2="7">...</div>
</div>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
colwidth |
integer | auto | Columns width |
animation |
boolean | true | Animate columns on update |
duration |
integer | 200 | Animation duration |
gutter |
integer | 0 | Gutter between columns |
controls |
string | false | Css selector to connect filter / order controls. |
filter |
string | ” | Items filter |
Init element manually
var grid = UIkit.grid(element, { /* options */ });
Events
Name | Parameter | Description |
---|---|---|
beforeupdate.uk.grid |
event, children | On before update grid |
afterupdate.uk.grid |
event, children | On after update grid |
Example
Listening for beforeupdate events with jQuery:
$(function() {
$('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, children) {
// your event-handling goes here
});
});