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

<div type='discussions-op-text'>

<sup>Originally posted by **jimjam-slam** March  7, 2023</sup>
Quarto's CSS grid system has 13 grid column tracks:

![Screenshot of a Quarto document, with the grid lines highlighted by the browser tools](https://user-images.githubusercontent.com/6520659/223332412-385a1ec1-b1b4-44c6-badb-d2ac9e441a34.png)

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.

![Main elements of the Quarto grid](https://quarto.org/docs/prerelease/1.3/images/grid.png)

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](https://stackoverflow.com/questions/46308048/how-to-target-a-specific-column-or-row-in-css-grid-layout) 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).</div>
dragonstyle
2023-03-07T14:25:15Z
dragonstyle
v1.4
open
Add elements for document sidebar and margin gutters (allow targeting of non-content grids)
https://github.com/quarto-dev/quarto-cli/issues/4671