This extension provides support for Masonry.js.

quarto add mcanouil/quarto-masonry

This will install the extension under the _extensions subdirectory.
If you're using version control, you will want to check in this directory.

Activate Masonry.js in HTML/Markdown using data-masonry='{ "itemSelector": ".grid-item"}' in fenced divs with proper item selector to only rearrange a subset of elements.
See Masonry.js options page for details.

:::: {.grid data-masonry='{ "itemSelector": ".grid-item" }'}
::: {.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}
:::
::::

Here is the source code for a minimal example: example.qmd.

Output of example.qmd:

• HTML