I'm trying to use row and column layouts within tabset panels but I'm getting unexpected behaviour. In the below example, I'm getting the expected result only in tab 2 (row and column layouts are respected) but not tab 1. I posted this in the quarto-cli discussions and was told it relates to this issue, and that the issue contains everything I need to get a workaround (but my subsequent question was left unanswered). I don't understand how to apply the issue to my own example. I've tried replacing the {.tabset} headings with {.card} headings but to no avail.

---
title: "Cars"
format: dashboard
---
    
## Row {.tabset}

### 1

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
print("Column = 50%")
```

```{r}
print("Column = 50%")
```

##### Column {width=50%}

```{r}
print("Column = 50%")
```

### 2

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
print("Column = 50%")
```

```{r}
print("Column = 50%")
```

##### Column {width=50%}

```{r}
print("Column = 50%")
```

I'm trying to use row and column layouts within tabset panels but I'm getting unexpected behaviour. In the below example, I'm getting the expected result only in tab 2 (row and column layouts are respected) but not tab 1. I posted this in the quarto-cli discussions and was told it relates to this issue, and that the issue contains everything I need to get a workaround (but my subsequent question was left unanswered). I don't understand how to apply the issue to my own example. I've tried replacing the {.tabset} headings with {.card} headings but to no avail.

---
title: "Cars"
format: dashboard
---
    
## Row {.tabset}

### 1

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
print("Column = 50%")
```

```{r}
print("Column = 50%")
```

##### Column {width=50%}

```{r}
print("Column = 50%")
```

### 2

#### Row {height=20%}

```{r}
print("Row = 20%")
```

#### Row {height=80%}

##### Column {width=50%}

```{r}
print("Column = 50%")
```

```{r}
print("Column = 50%")
```

##### Column {width=50%}

```{r}
print("Column = 50%")
```

• quarto

1 Answer 1

I don't see a possibility to do this with nested cards similar to the example in quarto-dev/quarto-cli#11387.

However, you can use .columns and .rows divs for defining the grid layout and then place the content inside some .card.

---
title: "Palmer Penguins"
format: dashboard
---
    
## Row {.tabset}

### 1

:::::: {.rows}

::::: {.card height="20%"}
```{r}
print("Row = 20%")
```
:::::

:::: {.columns}

::: {.rows}
```{r}
print("Column = 50%")
```
```{r}
print("Column = 50%")
```
:::

```{r}
print("Column = 50%")
```

::::

::::::

### 2

{{< lipsum >}}