Masonry.js

Quarto Extension

Author

Mickaël CANOUIL, Ph.D.

Using the extension

This extension provides support for Masonry.js.

Without Masonry.js activated

Click to see the Markdown 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

Click to see the Markdown 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}
:::
::::