Add elements for document sidebar and margin gutters (allow targeting of non-content grids)

Discussed in https://github.com/quarto-dev/quarto-cli/discussions/4659

^{Originally posted by jimjam-slam March 7, 2023}
Quarto's CSS grid system has 13 grid column tracks:

The main elements in those tracks—the sidebar, article body (or header block) and margin, all have elements in the document, so they can be targeted by CSS.

The gutter elements, though (column tracks 1, 2, 6, 8, 12 and 13), are empty.

As far as I can tell, the only way to target empty grid cells is with CSS Grid-Structural Selectors, which are still in development and don't yet have any browser support. Using :nth-child doesn't work, as that targets the nth HTML child, not the nth grid cell. In other words, it only works if every grid cell is occupied.

This isn't a big issue, but if the empty gutters had empty HTML elements in them, you could do things like have a sidebar or margin with a background colour that goes out to the page edge (say, if I wanted tracks 1–5 to all be blue).

Start by tracing Quarto's CSS grid system and the generated document markup described in the issue. Check how the sidebar, article body or header block, and margin are represented, then determine where empty gutter tracks could be represented by HTML elements. Done means the non-content grid tracks can be targeted for page-edge styling without disrupting existing layout.