Masonry | Containers

Preview

Masonry item 1

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 2

Lorem ipsum dolor sit amet,sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, no simata sanctus est Lorem ipsum dolea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus esto.

Masonry item 3

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet no sea.

Masonry item 4

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 5

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 6

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 1

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 2

Masonry item 3

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet no sea.

Masonry item 4

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 5

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 6

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 1

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 2

Masonry item 3

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete. Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet no sea.

Masonry item 4

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 5

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Masonry item 6

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incidido sitamete.

Usage

<div class="maso-list" data-columns="3">
    <div class="menu-inner">
        <div><i class="menu-btn"></i><span>Menu</span></div>
        <ul>
            <li class="active"><a data-filter="maso-item" href="#">All</a></li>
            <li><a data-filter="cat-1" href="#">Category 1</a></li>
            <li><a data-filter="cat-2" href="#">Category 2</a></li>
            <li><a class="maso-order" data-sort="asc"></a></li>
        </ul>
    </div>
    <div class="maso-box">
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-1 cat-2">
             
        </div>
    </div>
</div>

<div class="maso-list">
    <div class="menu-inner" data-columns="3">
        <div><i class="menu-btn"></i><span>Menu</span></div>
        <ul>
            <li class="active"><a data-filter="maso-item" href="#">All</a></li>
            <li><a data-filter="cat-1" href="#">Category 1</a></li>
            <li><a data-filter="cat-2" href="#">Category 2</a></li>
            <li><a class="maso-order" data-sort="asc"></a></li>
        </ul>
    </div>
    <div class="maso-box">
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-1 cat-2">
             
        </div>
    </div>
    <div class="list-pagination">
        <ul class="pagination" data-page-items="3"></ul>
    </div>
</div>

<div class="maso-list" data-columns="3">
    <div class="menu-inner">
        <div><i class="menu-btn"></i><span>Menu</span></div>
        <ul>
            <li class="active"><a data-filter="maso-item" href="#">All</a></li>
            <li><a data-filter="cat-1" href="#">Category 1</a></li>
            <li><a data-filter="cat-2" href="#">Category 2</a></li>
            <li><a class="maso-order" data-sort="asc"></a></li>
        </ul>
    </div>
    <div class="maso-box">
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-2">
            
        </div>
        <div class="maso-item cat-1 cat-2">
             
        </div>
    </div>
    <div class="list-pagination">
        <a href="#" class="btn btn-sm load-more" data-pagination-anima="fade-bottom" data-page-items="3" data-options="lazyLoad:true">Load More</a>
    </div>
</div>

<div class="maso-list list-gallery" data-columns="3" data-lightbox-anima="fade-top">
    <div class="menu-inner">
        <div><i class="menu-btn"></i><span>Menu</span></div>
        <ul>
            <li class="active"><a data-filter="maso-item" href="#">All</a></li>
            <li><a data-filter="cat-1" href="#">Category 1</a></li>
            <li><a data-filter="cat-2" href="#">Category 2</a></li>
            <li><a class="maso-order" data-sort="asc"></a></li>
        </ul>
    </div>
    <div class="maso-box">
        <div class="maso-item cat-2">
            <a class="img-box" href="image.jpg">
                <img src="image.jpg">
            </a>
        </div>
        <div class="maso-item cat-2">
            <a class="img-box mfp-iframe" href="https://www.youtube.com/watch?v=Lb4IcGF5iTQ">
                <img src="image.jpg">
            </a>
        </div>
        <div class="maso-item cat-1">
            <a class="img-box mfp-iframe" href="video.mp4">
                <img src="image.jpg">
            </a>
        </div>
    </div>
</div>

Installation

<script src='themekit/scripts/isotope.min.js'></script>
<script src='themekit/scripts/imagesloaded.min.js'></script>

Settings

Name Type Description

Masonry item content -- The masonry item content accept any content but usually it contain items like a image box, a media box or a content box.

Items margin

CSS

Add the class no-gap to the component to remove the margins between the items. Use this CSS style to set custom margins, replace 123 with the margin you want in px:

.maso-list .maso-box {
    margin: -123px;
}
.maso-list .maso-item {
    padding: 123px;
}

Try it No margin 70px margin

Columns

Attribute

Add the attribute data-columns="123" to the component to set the columns number from 1 to 6.
Add the attribute data-columns-lg="123" to set the columns number on small screens.
Add the attribute data-columns-md="123" to set the columns number on notebook screens.
Add the attribute data-columns-sm="123" to set the columns number on tablets and smartphones screens.
Add the attribute data-columns-xs="123" to set the columns number on extra small screens.

Try it 2 columns 4 columns

Menu Information The masonry menu is a inner menu component, for more details visit the inner menu page.

Lightbox gallery

To create a images and videos gallery with lightbox add the class list-gallery to the component. This feature require the installation of the lightbox plugin:

<link rel='stylesheet' href='themekit/scripts/magnific-popup.css'>
<script src='themekit/scripts/magnific-popup.min.js'></script>

Add the attribute data-lightbox-anima="animation-name" to component to apply a animation when the user change the item. Video contents requires to add the class mfp-iframe to the link code. For more details visit the lightbox page.

Gallery deep linking

URL

To open the lightbox of a specified gallery item on page load use the url www.your-site.com?lightbox=list-123. Replace 123 with item index you want to open. If you have multiple grids use the url www.your-site.com?lightbox=list-3&id=YOUR-ID. Replace YOUR-ID with the ID of the grid list you want to open.

Try it Open item 1 Open item 2

Manual initialization Attribute Add the attribute data-trigger="manual" to the component to stop the auto execution of the component on page load. Use this feature when the component is placed inside another container.

Pagination installation

To add the pagination add the folliwing code inside the component, on bottom:

<div class="list-pagination">
    <ul class="pagination" data-page-items="123"></ul>
</div>

This feature require the installation of the pagination plugin:

<script src="themekit/scripts/pagination.min.js"></script>

Pagination options

Attribute

`data-page-items="123"`	Number of items showed on each page. Add the attribute `data-page-items-lg="123"` to set the items number on small screens. Add the attribute `data-page-items-md="123"` to set the items number on notebook screens. Add the attribute `data-page-items-sm="123"` to set the items number on tablets and smartphones screens.
`data-pagination-anima="value"`	Animation applied on page change. For the animations list and for more details visit the animations page.
`data-options="values"`	You can pass the plugin options directly from the component with the attribute `data-options="optione:value,optione:value, ..."`. To view the full options list visit the pagination plugin documentation page. Add the option `scrollTop:true` to scroll the page to the top of the masonry when the user change page.

Pagination size

CSS

Add the class pagination-lg to the pagination code to enlarge it.

Try it Pagination lg

Pagination alignment

CSS

Add one of the following classes to the pagination code to align the pagination align-center,align-right.

Try it Align center Align right

Load more installation

To add the load more add the folliwing code inside the component, on bottom:

<div class="list-pagination">
    <a href="#" class="btn btn-sm load-more" data-page-items="2">Load More</a>
</div>

This feature require the installation of the pagination plugin:

<script src="themekit/scripts/pagination.min.js"></script>

Load more lazy load Attribute Add the attribute data-options="lazyLoad:true" to the load more button to feature automaticall show the next page next when the user reach the bottom of the grid.

Load more alignment

CSS

Add one of the following classes to the pagination container code to align the load more button align-center,align-right.

Try it Align center Align right

Load more size CSS The load more button is a classi button, for more details on how to customize it visit the buttons page.

Sorting HTML Add the attribute data-sort="123" to each item, replace 123 with sorting position number you want, 0 is the first position. Add the code <li><a class="maso-order" data-sort="asc"></a></li> to the masonry menu to add the sorting button.

Auto masonry

CSS

Add the class maso-layout to the component to automatically set random height to the images of the items.

Try it Maso layout

Grid list

Image box

Media box

Content box

Pagination

Lightbox

Preview

Masonry item 1

Masonry item 2

Masonry item 3

Masonry item 4

Masonry item 5

Masonry item 6

Masonry item 1

Masonry item 2

Masonry item 3

Masonry item 4

Masonry item 5

Masonry item 6

Masonry item 1

Masonry item 2

Masonry item 3

Masonry item 4

Masonry item 5

Masonry item 6

Usage

Installation

Settings

Related content