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-grid attribute to the container element. Set the width of the grid items by using the col-* or .row-col-* classes from the Grid component.

Example

1
2
3
4
5
6
7
8

Markup

  • <!-- This is a grid using col-* on each item -->
    <div data-grid>
        <div class="col-6-12-small col-3-12-medium">...</div>
        <div class="col-6-12-small col-3-12-medium">...</div>
    </div>
    
    <!-- This is a grid using row-col-* on the grid itself -->
    <div class="row-2-cols-small row-4-cols-medium" data-grid>
        <div>...</div>
        <div>...</div>
    </div>
  • <!-- This is a something else -->
    <div data-grid>
        <div class="col-6-12-small col-3-12-medium">...</div>
        <div class="col-6-12-small col-3-12-medium">...</div>
    </div>
    
    <!-- This is a grid using row-col-* on the grid itself -->
    <div class="row-2-cols-small row-4-cols-medium" data-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-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-filter attribute to define the category you want to filter. Then you also need to add the data-filter attribute to each grid item to define what category the item belongs to.

Example

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

Markup

This example is using a Subnav to filter the items.

<!-- Filter Controls -->
<ul id="my-id" class="subnav">
    <li data-filter=""><a href="#"></a></li>
    <li data-filter="filter-a"><a href="#"></a></li>
    <li data-filter="filter-b"><a href="#"></a></li>
</ul>

<!-- Dynamic Grid -->
<div data-grid="{controls: '#my-id'}">
    <div data-filter="filter-a">...</div>
    <div data-filter="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-sort attribute with a custom value that targets the category you want to be sorted, for example data-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-sort="my-category:desc".

Example

A
B
C
D
E
F
G
H

Markup

<ul id="my-id" class="subnav">
    <li data-sort="my-category"><a href="#"></a></li>
    <li data-sort="my-category:desc"><a href="#"></a></li>
</ul>

<div data-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="subnav">
    <li data-sort="my-category"><a href="#"></a></li>
    <li data-sort="my-category:desc"><a href="#"></a></li>
    <li data-sort="my-category2"><a href="#"></a></li>
    <li data-sort="my-category2:desc"><a href="#"></a></li>
</ul>

<div data-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.

Init element manually

var grid = Clique.row(element, {
    /* options */
});

Events

Name Parameter Description
beforeupdate.clique.row event, children On before update grid
afterupdate.clique.row event, children On after update grid

Example

Listening for beforeupdate events with jQuery:

$(function() {
    $('[data-grid]').on('beforeupdate.clique.row', function(e, children) {
        // your event-handling goes here
    });
});