Custom page layout

Experimenting with Quarto’s custom page layout.

This is an example of a Quarto HTML page with page-layout: custom. Like the page title, this div would be all the way at the edge of the page had I not used Bootstrap’s CSS Grid classes to define its layout. Inside of a grid container (a div with the class grid), this area has the classes .g-col-6 .g-start-4, meaning it spans six of the 12 grid columns (.g-col-6), and starts at the fourth (.g-start-4).

The default grid has 12 columns. Below, I’ll use Auto Columns with a parent .grid container holding 12 classless divs, each of which contains one of Pablo Stanley’s Open Peeps.

Standing doctor wearing a mask.

Standing person wearing a beanie and with hearts for eyes.

Standing person with a prosthetic leg and glasses on.

Standing person with a polka-dotted shirt on.

Standing person in a yellow blazer.

Person with a mustache taking a stroll.

Standing person smiling super wide.

Standing person with glasses and green shorts.

Standing person with cute little buns in their hair.

Standing person with glasses and a green blazer.

Standing person wearing a hat.

Standing doctor wearing a mask and a lab coat.

Below, I use No Grid Classes. The parent div has a class of grid and style="--bs-columns: 2;". The two images are each in a div inside—thus, each image takes up one of the two columns (i.e. half of the page).

Person bicycling to the left.

Person bicycling to the right.

Here’s a screenshot of what the grids on this page look like using the browser’s CSS Grid Inspector. I’ve written more about CSS Grid and using in-browser inspector tools with it here. See my page-layout write-up for more on page-layout options in Quarto and links to the relevant documentation.

Screenshot of custom layout page with the browser grid inspector overlaid. Browser developer tools are shown in the right-hand section of the browser window.