Elements

If you can dream it, you can do it

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

image

Blown away

Always continue the climb. It is possible for you to do whatever you choose

image

Spectacular

Life is a series of natural and spontaneous changes. Don't resist them - that only creates sorrow. Let reality be reality

image

Unlock the door

Design is not what it looks like; Design is how it works. Good design speaks volumes about the designer

image

First cup

Good things come, not to the fast, but to those who wait.

Show code

<!-- grid filter --> <ul id="grid1" class="uk-subnav uk-subnav-pill"> <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="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="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>
demo