How to use layout_column_wrap() inside a quarto document

Question

I'd like to make use of bslib::layout_column_wrap() inside a Quarto doc, but columns do not wrap as expected .

For example, this:

---
title: "test"
---

```{r}

bslib::layout_column_wrap(
  width = 1/2,
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)

```

produces:

Answer 1

You can pass "d-grid" to the class argument of bslib::layout_column_wrap():

---
title: "test"
---

```{r}
bslib::layout_column_wrap(
  width = 1/2,
  class = "d-grid",
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)
```

This changes the default display: block to display: grid in the div produced by the quarto code chunk.

Answer 2

bslib::layout_column_wrap is using grid-template-columns css property, which needs display: grid.

---
title: "test"
---

```{r}
#| classes: col_wrap
bslib::layout_column_wrap(
  width = 1/2,
  bslib::value_box(1, 1),
  bslib::value_box(2, 2)
)
```

```{css, echo=FALSE}
div.col_wrap div.bslib-column-wrap {
  display: grid;
}
```