Page layout

Using Quarto’s different layout classes.

While the default layout for Quarto HTML documents (page-layout: article) is optimized for readability, there are other page-layout options you can choose from (article, full, custom, and none). Since Quarto uses CSS Grid, you can see the lines that indicate the named areas of the page layout using your browser’s developer tools.

In Quarto’s article-layout documentation, you’ll learn about classes you can apply to certain elements of your document to affect their display and position. The width with page-layout: full¹ is the same width you get by using the .column-page class for a div or output of a code chunk.

Here’s an example of the .column-page class using one of the compositions from Pablo Stanley’s Open Doodles collection.

A guy dancing while listening to a walkman with headphones on.

If you want something to take up the entire width of the screen, you can use a screen column by assigning the class .column-screen or setting a code-chunk option to column: screen.

The body-column classes are narrower. By default, output will be the same width as an article (.column-body). For something wider than the article body, but not quite as wide as a full page, you can use .column-body-outset.²

Illustration of a woman carrying a giant ice cream cone, and a guy walking and taking a selfie.

Of course, since Quarto enables Bootstrap’s CSS Grid for layout, you can do all sorts of different things with that, or with Bootstrap-style grid columns. For example, below I’ve created a .grid container that uses no-grid classes. In this case, style="--bs-columns: 3;" is added to outer grid element, and the three inner divs are automatically sized such that they each take up equal parts of their container.

A bearded person in a bikini

A person petting a doggo

A person rollerskating

This page uses the Quarto default HTML layout (article), so the grid columns are defined within the body column. However, you can use custom page layout (page-layout: custom)³ if you want to create a page without a default grid system. A custom page still has CSS Grid enabled for you to use and define your own layout.

Custom layout with caution

CSS Grid makes it relatively easy to develop a custom page layout. But, remember that what looks good on one device might not look very good on another (which is why Bootstrap provides and Quarto makes use of responsive classes)!

Quarto’s page templates make use of responsive classes to optimize display across devices. While you can certainly do the same on your own, it’s a bit more effort. Take, for example, the demo custom-layout page I made. Using various Bootstrap CSS Grid classes⁴, my layout looks reasonable in a typical computer web browser.

Screenshot of custom layout page with the browser grid-inspector lines overlaid.

However, when the viewport width is narrower (as it would be on, say, a tablet or phone), there’s a stark contrast between the page made with Quarto’s default (page-layout: article) and page-layout: custom.

Screenshot of narrow viewport with page-layout: article.

Screenshot of narrow viewport with page-layout: custom.

Of course, I could go in and make use of responsive classes on the custom page. However, it will probably make your life easier to use Quarto’s built-in page-layout, article-layout, and figure-layout features.

Footnotes

1. Example of full page layout.

2. See a table of all available column specifiers here.

3. Example of custom page layout.

4. See the demo custom-layout page itself for implementation details.