This is a two-part issue. Firstly, I want to make sure that a feature is not accidental (and would thus be prone to breaking) and secondly ask about more elegant solutions for for the same idea.

Since quarto uses pandocs native divs we can create arbitrarily nested divs by adding more `:` to the div separator. So I wondered if this also worked in [quarto's custom figure layouts](https://quarto.org/docs/authoring/figures-and-layout.html#complex-layouts), and indeed it does!

This makes it possible to combine row-first and column-first layout options, which would not be possible with a single layout array definition.

What is still difficult with this approach though is the alignment and sizing of sub-figures if the goal is for example to allign the two 2 small cats with the big cat (note that my numbers don't quite work, there is still a gap at the top and bottom). In theory these numbers could be calculated from the image aspect ratio and the margins.

```
:::: {layout="[[0.75, 1.75], [1]]" layout-valign="center"}
::: {layout-nrow=2}
![ ](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg)

![ ](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg)
:::

![ ](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg)
::::
```

![image](https://user-images.githubusercontent.com/17450586/149985838-9123a9e2-dc7a-4c8b-b5ab-1474bd396c38.png)

2022-01-18T17:23:53Z
jmbuhr
closed
Nested native divs for custom complex layouts
https://github.com/quarto-dev/quarto-cli/issues/269