How to place code chunks side by side, letting Quarto handle page layout (e.g., mobile vs. desktop)?

[emmansh]

I want to place multiple code chunks side by side. I know several ways to do it, but none of them is satisfactory, because:

• I want the code chunks to have some space between them; and
• I want Quarto to handle screen layout responsively in case the screen size changes, for example when using mobile; and
• Possibly more than 2 code chunks (potentially 4-5) so things might get crowded

Relying on a combination of Quarto features & knitr::include_graphics(), I know how to achieve all the above, but for images. I show an example below. Is there a way to generalize a similar mechanism for code chunks as well?

---
title: "quarto-page-side-by-side"
---

```{r}
#| eval: true
#| echo: false
#| layout-ncol: 4
#| column: screen-inset

knitr::include_graphics("media/a.jpg")
knitr::include_graphics("media/b.jpg")
knitr::include_graphics("media/c.jpg")
knitr::include_graphics("media/d.jpg")
```

I've published the webpage and you can see it here. See how we can play around with browser window size, and the images get resized accordingly. As we keep narrowing down the window, eventually the images will become one on top of the other.

This behavior is perfect! How can we translate that to have code chunks instead of images?

[dragonstyle]

You can use a div with the same attribute to layout blocks in this way. For example:

:::{layout-ncol="4"}

```{r}
plot(cars)
```

```{r}
plot(mtcars)
```

```{r}
plot(iris)
```

```{r}
plot(ToothGrowth)
```

:::