quartoand.me
  • Home
  • About

Full page layout

Experimenting with Quarto’s full page layout.

This is an example of a Quarto page with the page-layout option set to full. The YAML looks like this:

format: 
  html:
    page-layout: full

Like the default article layout, full-page layout has Bootstrap 5.1’s CSS Grid enabled. However, it gives you a different grid setup than article layout when you aren’t using the margin areas. As described in the Quarto page-layout docs:

Full layout uses the article grid system, but automatically expands the content area to use the sidebar and margin region if no content is placed within those regions. This is useful for layouts that don’t need to be constrained to reading width and that will benefit from additional horizontal space (e.g. landing or index pages).

Human’s don’t actually do their best reading when things are this wide, but it’s nice to have the option. I’ve written some more about page-layout options here.

© 2022, Mara Averick