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

Example

Markup

<!-- This is a grid using f-width-* on each item -->
<div data-f-grid>
	<div class="f-width-small-1-2 f-width-medium-1-4">...</div>
	<div class="f-width-small-1-2 f-width-medium-1-4">...</div>
</div>

<!-- This is a grid using f-grid-width-* on the grid itself -->
<div class="f-grid-width-small-1-2 f-grid-width-medium-1-4" data-f-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-f-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-f-filter attribute to define the category you want to filter. Then you also need to add the data-f-filter attribute to each grid item to define what category the item belongs to.

Example

• All
• Filter A
• Filter B
• Filter C

Markup

This example is using a Subnav to filter the items.

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

<!-- Dynamic Grid -->
<div data-f-grid="{controls: '#my-id'}">
	<div data-f-filter="filter-a">...</div>
	<div data-f-filter="filter-b">...</div>
</div>

Example 2

• Filter A
• Filter B

• Filter C
• Filter D
• Clear Filter

Markup

This example is using a Subnav to filter the items with two filter lists.

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

<ul id="filter3" class="f-subnav">
	<li data-f-filter="filter-a"><a href=""></a></li>
	<li data-f-filter="filter-b"><a href=""></a></li>
	<li data-f-filter-clear><a href=""></a></li>
</ul>

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

Example

• Ascending
• Descending

Markup

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

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

• Character (Asc)
• Character (Desc)
• Number (Asc)
• Number (Desc)

Markup

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

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

Init element manually

let grid = FatKit.grid(element, { /* options */ });

Events

Example

Listening for beforeupdate events with jQuery:

	FatKit.$('[data-f-grid]').on('beforeupdate.f.grid', (e, children) => {
		// your event-handling goes here
	});