Dynamic Grid
To create a filterable portfolio grid, use the data-uk-grid data attribute. The id must be unique for each portfolio grid. Use the data-uk-filter data attribute to create filters for the grid. The data-uk-filter class can be placed in a different module position. You can learn more about the dynamic grid in the full documentation
| Parameters | Description |
|---|---|
id |
A unique id that identifies a dynamic grid |
tag |
Defines the filters for the dynamic grid. |
animation |
set the animation for the portfolio items |
Show code
<!-- grid filter -->
<ul id="grid1" class="uk-subnav uk-subnav-pill tm-grid-filters">
<li class="uk-active" data-uk-filter=""><a href="#">all</a></li>
<li data-uk-filter="photography"><a href="#">Photography</a></li>
</ul>
<!-- masonry grid -->
<div class="tm-dynamic-grid uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 " data-uk-grid="{gutter: 10, controls: '#grid1'}">
<!-- grid item -->
<div data-uk-filter="photography">
<div class="uk-panel uk-animation-fade">
<figure class="uk-overlay uk-overlay-hover">
<img class="uk-overlay-scale" src="images/demo/gallery/1.jpg" width="800" height="800" alt="image" >
<div class="tm-overlay-box"></div>
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>
<h3 class="uk-h3 tm-grid-title uk-margin">Blown away</h3>
<div class="uk-margin-small tm-grid-content">
<p>Always continue the climb. It is possible for you to do whatever you choose</p>
<!-- lightbox image -->
<a class="uk-position-cover" href="images/demo/gallery/1.jpg" data-uk-lightbox="{group:'porfolio1'}" title="Blown away"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
<!-- grid item -->
<div data-uk-filter="webdesign">
<div class="uk-panel uk-animation-fade">
<figure class="uk-overlay uk-overlay-hover">
<img class="uk-overlay-scale" src="images/demo/gallery/7.jpg" width="800" height="800" alt="image" >
<div class="tm-overlay-box"></div>
<div class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-center uk-flex-middle uk-text-center">
<div>
<h3 class="uk-h3 tm-grid-title uk-margin">Spectacular</h3>
<div class="uk-margin-small tm-grid-content">
<p>Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality</p>
<!-- lightbox image -->
<a class="uk-position-cover" href="images/demo/gallery/7.jpg" data-uk-lightbox="{group:'porfolio1'}" title="Clear lens"></a>
</div>
</div>
</div>
</figure>
</div>
</div>
</div>
