2571 Layout F4e230b1

Layout

Quarto provides column classes for controlling content width and placement, including margin content.

Column Classes

Available Columns

Body Column (Default)

Standard content width:

::: {.column-body}
Default body-width content.
:::

Body Outset

Slightly wider than body:

::: {.column-body-outset}
![Wide image](wide.png)
:::

Page Width

Extends to page margins:

::: {.column-page}
![Page-width image](panorama.png)
:::

Screen Width

Full browser width (no margins):

::: {.column-screen}
![Full-width image](banner.png)
:::

Screen Inset

Full width with small margins:

::: {.column-screen-inset}
Content with small margins.
:::

Shaded Screen Inset

With background shading:

::: {.column-screen-inset-shaded}
Shaded full-width content.
:::

Directional Variants

Each column class has left/right variants:

::: {.column-body-outset-left}
Extends left only.
:::

::: {.column-page-right}
Extends to right page margin.
:::

::: {.column-screen-left}
Full width on left side.
:::

Margin Content

Text in Margin

::: {.column-margin}
This appears in the right margin.
:::

Figures in Margin

```{r}
#| column: margin
#| fig-cap: "Margin figure."

plot(1:10)
```

Or for markdown images:

::: {.column-margin}
![Margin image](small.png)
:::

Tables in Margin

```{r}
#| column: margin
#| tbl-cap: "Margin table."

knitr::kable(small_data)
```

Mixed Content

Main text here.

::: {.column-margin}
Margin note explaining the main content.
:::

More main text.
```

## Code Cell Layout Options

Control output placement from code cells:

### Column Option

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

# Output spans page width
plot(1:100)
```

Options: body, body-outset, page, page-inset, screen, screen-inset, margin.

Figure Column

Target figure outputs specifically:

```{r}
#| fig-column: margin

plot(1:10)
```

Table Column

Target table outputs:

```{r}
#| tbl-column: page

knitr::kable(wide_data)
```

Caption Location

In Margin

```{r}
#| fig-cap: "Figure with margin caption."
#| cap-location: margin

plot(1:10)
```

Document Default

fig-cap-location: margin
tbl-cap-location: margin

References in Margin

Footnotes in Margin

reference-location: margin

Citations in Margin

citation-location: margin

Combined

reference-location: margin
citation-location: margin

Page Layout

Document-Wide Settings

format:
  html:
    page-layout: article   # Default
    page-layout: full      # Full width
    page-layout: custom    # Custom layout

Grid Customization

format:
  html:
    grid:
      sidebar-width: 300px
      body-width: 800px
      margin-width: 300px
      gutter-width: 1.5rem

Two-Column Layout

Create side-by-side columns:

::: {.columns}

::: {.column width="50%"}
Left column content.
:::

::: {.column width="50%"}
Right column content.
:::

:::

Adjust width percentages for unequal columns (e.g., 30%/70%).

Content Layout Divs

Arrange any content (images, tables, text) in grid layouts.

Column Layout

::: {layout-ncol=2}
![](image1.png)

![](image2.png)
:::

Row Layout

::: {layout-nrow=2}
Content 1.

Content 2.
:::

Complex Layouts

Use layout array for precise control. Values represent relative widths:

::: {layout="[[1,1], [1]]"}
First row, left.

First row, right.

Second row, full width.
:::

With Spacing

Negative values add spacing between elements:

::: {layout="[[40,-20,40], [100]]"}
Content 1.

Content 2.

Full width below.
:::

Vertical Alignment

::: {layout-ncol=2 layout-valign="bottom"}
Tall content.

Short content.
:::

Options: top, center, bottom.

Layout Attributes

Tabsets

Create tabbed content:

::: {.panel-tabset}

## Tab 1

Content for tab 1.

## Tab 2

Content for tab 2.

:::

With Groups

::: {.panel-tabset group="language"}

## R

```r
x <- 1
```

## Python

```python
x = 1
```

:::

Tabs with same group stay synchronized.

Asides

For inline margin notes:

Main text content.
[This is an aside that appears in the margin.]{.aside}
More main text.

PDF Layout

PDF uses different layout system. Key options:

format:
  pdf:
    documentclass: article
    geometry:
      - margin=1in
    classoption:
      - twocolumn

Margin Notes in PDF

format:
  pdf:
    documentclass: scrartcl # KOMA-Script

KOMA classes support margin content automatically.

Resources

• Quarto Article Layout
• Page Layout
• Figures Layout