rows

quarto-revealjs-rows

Syntax

The plugin adds .rows and .row divs that mirror Quarto’s built-in .columns and .column:

::: {.rows}
::: {.row}
top
:::
::: {.row}
bottom
:::
:::

.rows is a vertical flexbox; each .row divides the available height evenly.

Nesting

.rows and .columns can be nested in either direction. Put rows inside a column:

::: {.columns}
::: {.column}
left
:::
::: {.column}
::: {.rows}
::: {.row}
a
:::
::: {.row}
b
:::
:::
:::
:::

Nesting (cont.)

…or columns inside a row:

::: {.rows}
::: {.row}
top
:::
::: {.row}
::: {.columns}
::: {.column}
a
:::
::: {.column}
b
:::
:::
:::
:::

Widths

Three or more columns still need explicit widths (a Quarto requirement, not a grid one):

::: {.columns}
::: {.column width="33%"}
a
:::
::: {.column width="33%"}
b
:::
::: {.column width="33%"}
c
:::
:::

Rows do not need widths — they always divide the available height evenly.

Examples

2 rows in 1 column

column 1

row 1

row 2

3 rows in 1 column

column 1

row 1

row 2

row 3

rows in both columns

left, row 1

left, row 2

right, row 1

right, row 2

right, row 3

columns inside a row

top row

bottom, column 1

bottom, column 2

columns inside every row

top, column 1

top, column 2

top, column 3

bottom, column 1

bottom, column 2

3 columns, rows in the middle

column 1

row 1

row 2

row 3

column 3