Add elements for document sidebar and margin gutters

[jimjam-slam]

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).

[dragonstyle]

This is a pretty interesting suggestion - something I hadn't even thought of, so thank you! I'll open an enhancement request and give it some consideration for our 1.4 release (we'll starting working on that version soon, but are currently stabilizing 1.3). Two additional thoughts:

• Just wanted to be sure you were aware of the docked layout for the sidebar which may have behavior that is more to your liking.
• I wonder if we should be making the background behavior you describe just work if you side a sidebar background color (I have a feeling that the floating sidebar ends up with a band which probably doesn't look great).

Thanks again.

[jimjam-slam]

Oh yeah, the docked sidebar would probably a lot easier in most cases! I personally like the undocked sidebar sticking closer to the body at large widths, but that's very much to taste.

When you target #quarto-sidebar, you do indeed get a not great stripe:

(Although if you were able to target the corresponding tracks in the #title-block-header, you'd be able to have a top-to-bottom stripe effect, which some people might like.)

You can also target #TOC for a floating pill effect, which is nice. See below with background-color, padding-inset and border-radius:

This is all very much in enhancement territory. I do think there are some styling use cases you could enable by having elements in the otherwise empty grid cells (even if it is patching an unfortunate oversight in the grid system). For examplke, somebody might want to have a different background colour for the margin on the right. But I wouldn't call it high priority by any stretch!

[mcanouil]

Closing in favour of #4671