Preview

Grid item 1

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 2

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 3

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 4

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 5

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 6

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 1

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 2

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 3

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 4

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 5

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

Grid item 6

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 1

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 2

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 3

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 4

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 5

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Grid item 6

    Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.

    Load More

    Usage

    <div class="grid-list" data-columns="3">
    <div class="grid-box">
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
         
        </div>
    </div>
</div>

    <div class="grid-list" data-columns="3">
    <div class="grid-box">
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
         
        </div>
    </div>
    <div class="list-pagination">
        <ul class="pagination" data-page-items="2" data-pagination-anima="fade-bottom"></ul>
    </div>
</div>

    <div class="grid-list" data-columns="3">
    <div class="grid-box">
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
        
        </div>
        <div class="grid-item">
         
        </div>
    </div>
    <div class="list-pagination">
        <a href="#" class="btn btn-sm load-more" data-pagination-anima="fade-bottom" data-page-items="2">Load More</a>
    </div>
</div>

    <div class="grid-list list-gallery" data-lightbox-anima="fade-top" data-columns="3">
    <div class="grid-box">
        <div class="grid-item">
            <a class="img-box" href="image.jpg">
                <img src="image.jpg">
            </a>
        </div>
        <div class="grid-item">
            <a class="img-box mfp-iframe" href="https://www.youtube.com/watch?v=Lb4IcGF5iTQ">
                <img src="image.jpg">
            </a>
        </div>
        <div class="grid-item">
            <a class="img-box mfp-iframe" href="video.mp4">
                <img src="image.jpg">
            </a>
        </div>
    </div>
</div>

    Settings

    Name Type Description
    Grid item content -- The grid 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:
    .grid-list > div {
    grid-gap: 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
    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
    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 grid 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.
    Masonry list
    Image box
    Media box
    Content box
    Animations
    Lightbox