How to place multiple code chunks side by side in Quarto -> HTML?

Question

How can I place multiple code chunks side-by-side in Quarto -> HTML? I've seen this answer, which is great, but it accounts for just 2 code chunks. Is there a way to place up to 4-5 code chunks side-by-side, possibly using .column-screen-inset, to take advantage of the entire screen width?

I know a way to get exactly what I want, but it has two caveats (which are essentially one):

It works for images
It relies on knitr::include_graphics()

Thus, if I do:

my_file.qmd

---
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 get this nice page layout with 4 images, side-by-side, that get resized as I change the window size. What's more, if we keep narrowing the window, ultimately the images will be stacked one on top of the other.

Is there a way to achieve this functionality or similar, but with code chunks instead of images?

Shafee · Accepted Answer · 2022-11-23 10:57:52Z

3

You can try this using some CSS.

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

```{css, echo=FALSE, eval=TRUE}
.multiple .column {
  width: 15%;
  margin: 5px;
}

.multiple .columns {
  display: flex;
}

@media (max-width: 767px) {
  .multiple .column {
    width: auto;
  }

 .multiple .columns {
   display: flex;
   flex-direction: column;
  }
}
```

::::: { .multiple}

:::: {.columns .column-screen-inset}

::: column
```{r}
print("This is the 1st code chunk")
```
:::

::: column
```{r}
print("This is the 2nd code chunk")
```
:::

::: column
```{r}
print("This is the 3rd code chunk")
```
:::

::: column
```{r}
print("This is the 4th code chunk")
```
:::

::: column
```{r}
print("This is the 5th code chunk")
```
:::

::::
:::::

If you want to add more chunks side by side, just decrease the value of the width property within the .multiple .column selector.

edited Nov 23, 2022 at 10:57

answered Nov 23, 2022 at 9:52

Shafee

20.9k4 gold badges39 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emman Over a year ago

Looks awesome, many thanks! Is it also possible to implement the one-of-top-of-the-other when the window gets very narrow, as in my images example? So it would fit mobile screens nicely.

Shafee Over a year ago

See the edit in the CSS code chunk.

Collectives™ on Stack Overflow

How to place multiple code chunks side by side in Quarto -> HTML?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related