Masonry

Cascading grid layouts, without writing the JavaScript.

What the masonry extension is for, how to enable it, and the smallest grid that lays itself out.
Author

Mickaël CANOUIL, Ph.D.

Caution

This extension is experimental, and its interface may still change.

Masonry.js packs items of uneven height into a cascading grid, the way a stone wall fits irregular blocks. Using it by hand means loading the library, writing an initialiser, and encoding the options as a JSON attribute.

masonry does all three. A fenced div with the .grid class becomes a grid, its .grid-item children are laid out, and the options are written as ordinary attributes.

Installation

quarto add mcanouil/quarto-masonry@0.4.1

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

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

filters:
  - masonry
:::: {.grid masonry-gutter="10"}
::: {.grid-item}
:::
::: {.grid-item .grid-item--height2}
:::
::: {.grid-item}
:::
::::

The library is loaded and initialised for you; no script is needed.

Important

Masonry positions items but does not size them. The .grid-item children need dimensions from your own CSS, as the examples on this site do.

See the Reference for every attribute, and the Examples for grids you can resize the window against.

Where it works

HTML formats that run JavaScript, RevealJS among them. Masonry is a browser library, so EPUB and every other format renders the divs as ordinary content in source order.

Back to top