How to use grid-column CSS property with bslib::layout_column_wrap() inside quarto doc

Question

If I have two value boxes setup like this:

```{r}
bslib::layout_column_wrap(
  width = NULL,
  fill = FALSE,
  class = "d-grid",
  style = htmltools::css(grid_template_columns = "repeat(auto-fill, minmax(200px, 1fr))"),
  bslib::value_box("Value box", 1),
  bslib::value_box("Value box", 2)
)
```

How do I use grid-column: span 2 to make the first value box span 2 columns?

The goal is to set this property for specific grid elements and preserve content wrapping.

I can do this:

```{r}
#| classes: col_wrap
bslib::layout_column_wrap(
  width = NULL,
  fill = FALSE,
  class = "d-grid",
  style = htmltools::css(grid_template_columns = "minmax(200px, 2fr) minmax(200px, 1fr)"),
  bslib::value_box("Value box", 1),
  bslib::value_box("Value box", 2)
)
```

but then you get horizontal scrollbars if the browser window width is too narrow.

I can go into dev tools and add style = "grid-column: span 2" to the first div.html-fill-container to get what I want:

I tried adding the following CSS code chunk but it did not work:

```{css}
#| include: false
div.bslib-column-wrap div:html-fill-container {
  grid-column: span 2
}

```

Answer 1

Try with the following css selector (which selects the first .html-fill-container div within div.bslib-column-wrap.

```{css, echo=FALSE}
div.bslib-column-wrap > div.html-fill-container:first-child {
  grid-column: span 2;
}
```