Custom demoΒΆ

You can have different column counts, aspect ratios and gaps from the defaults.

This has custom sass configuration. Modified gap, column count and aspect ratio for each screen size. In order for these changes to work with the javascript though, we need to pass them as data attribute to the plugin.

<div
 data-arrange="lt-grid"
 class="lt-container
        lt-xs-h-6
        lt-sm-h-5
        lt-md-h-4
        lt-lg-h-3"
 data-params='{
    "lg":{
        "gap":4,
        "cols":5,
        "aspect":0.5},
    "md":{
        "gap":6,
        "cols":4,
        "aspect":0.6666666667},
    "sm":{
        "gap":8,
        "cols":3,
        "aspect":1},
    "xs":{
        "gap":12,
        "cols":2,
        "aspect":1.5}
 }'>

1

3

4

7

2

5

6

8

9