# Dynamic Grid

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

1
2
3
4
5
6
7
8

### 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

1
2
3
4
5
6
7
8

### 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

A 1
B 2
A 3
B 4
B 5
A 6
B 7
A+B 8

### 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

A
B
C
D
E
F
G
H

### 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.

A 8
B 7
C 6
D 1
E 5
F 3
G 2
H 4

### 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
        });
    });