Masonry.js

Using the extension

This extension provides support for Masonry.js.

Without Masonry.js activated

Code

:::: {.grid}
::: {.grid-item}
:::
::: {.grid-item .grid-item--width2 .grid-item--height2}
:::
::: {.grid-item .grid-item--height3}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item .grid-item--width3}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item .grid-item--width2 .grid-item--height3}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--width2 .grid-item--height2}
:::
::: {.grid-item .grid-item--width2}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height3}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::::

With Masonry.jsactivated

Code

:::: {.grid data-masonry='{ "itemSelector": ".grid-item", "gutter": 0 }'}
::: {.grid-item}
:::
::: {.grid-item .grid-item--width2 .grid-item--height2}
:::
::: {.grid-item .grid-item--height3}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item .grid-item--width3}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item .grid-item--width2 .grid-item--height3}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--width2 .grid-item--height2}
:::
::: {.grid-item .grid-item--width2}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height3}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::::