Masonry.js

Quarto Extension

Author

Mickaël CANOUIL, Ph.D.

Using the extension

This extension provides support for Masonry.js. The grids below are initialised automatically; there is no manual initialisation script.

With the document-level defaults

A plain .grid is activated automatically using the document-level masonry defaults (item-selector and gutter here).

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}
:::
::::

With the friendly attributes

The masonry-* attributes are converted into the data-masonry JSON for you, inheriting the document-level masonry defaults for any option they do not set.

Click to see the Markdown code! 
:::: {.grid masonry-percent-position="true"}
::: {.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}
:::
::::

With raw data-masonry JSON

Writing the options yourself as raw JSON is still supported and takes precedence over the friendly attributes and metadata defaults.

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}
:::
::::