Overview

Quarto supports a variety of page layout options that enable you to author content that:

  • Fills the main content region
  • Overflows the content region
  • Spans the entire page
  • Occupies the document margin

Quarto uses the concept of columns to describe page layout (e.g. the “body” column, the “margin” column, etc.). Below we’ll describe how to arrange content into these columns.

All of the layout capabilities described in this document work for HTML output and many work for PDF and LaTeX output. For details about the PDF / LaTeX output, see [PDF/LaTeX Layout].

Body Column

By default, elements are position in the body of the document and are allowed to span the content of the document, like the below.

.column-body

But if you’d like, you can extend content slightly outside the bounds of the body by creating a div with the .column-body-outset class. For example:

:::{.column-body-outset}
Outset content...
:::

.column-body-outset

Page Column

If you need even more space for your content, you can use the .column-page class to make the content much wider, though stopping short of extending across the whole document.

.column-page

For example, to create a wider image, you could use:

:::{.column-page}
![](images/elephant.jpg)
:::

Three walking elephants in silhouette against the backdrop of a sunset.

For computational output, you can specify the page column in your code cell options. For example:

Code
```{r}
#| column: page

knitr::kable(
  mtcars[1:6, 1:10]
)
```
mpg cyl disp hp drat wt qsec vs am gear
Mazda RX4 21.0 6 160 110 3.90 2.620 16.46 0 1 4
Mazda RX4 Wag 21.0 6 160 110 3.90 2.875 17.02 0 1 4
Datsun 710 22.8 4 108 93 3.85 2.320 18.61 1 1 4
Hornet 4 Drive 21.4 6 258 110 3.08 3.215 19.44 1 0 3
Hornet Sportabout 18.7 8 360 175 3.15 3.440 17.02 0 0 3
Valiant 18.1 6 225 105 2.76 3.460 20.22 1 0 3

In addition, you can use .column-page-inset to inset the element from the page slightly, like so:

.column-page-inset

Screen Column

You can have content span the full width of the page with no margin (full bleed). For this, use the .column-screen class or specify column: screen on a code cell. For example:

::: {.column-screen}
![A full screen image](/image.png)
:::

.column-screen

The following code displays a Leaflet map across the whole page.