ContentGrid

The grid of a content page: a 200px left rail, the main column, and a 280px right rail, at most 1200px wide.

When to use

On every page with rails: the home page with both, a post or the about page with the right one only. A page without rails does not need it.

On a page

<ContentGrid stackRails="left">
  <Fragment slot="left">…</Fragment>
  <article>…</article>
  <Fragment slot="right">…</Fragment>
</ContentGrid>

Fill only the rails a page has; a missing rail’s column is dropped. The rails stack their children with railGap and stick below the nav while the main column scrolls.

Anatomy

Three columns with 48px between them. The grid sets no background and no padding above or below; the band around it does.

Variants

Prop	Values
`sticky`	Which rails stick: `both` (default), `left`, `right`, or `none` for a rail taller than the window
`stackRails`	Which rails stay below 768px, stacked under the main column: `both` (default), `left`, `right` or `none`
`keepRails`	Keeps the right rail between 768px and 1080px
`mainWidth`	Gives the main column this width and keeps it in the middle of the page, the rails right beside it; the grid then spans the page. A post with its table of contents uses `var(--container-reading)`
`leftWidth`, `rightWidth`, `gap`, `railGap`, `maxWidth`	Lengths

States

Width	Layout
Above 1080px	All three columns
768px to 1080px	The right rail is hidden, so it should hold nothing a reader needs
Below 768px	One column, the main content first and the rails under it, not sticky

Accessibility

The rails are <aside> elements, so screen readers list them as complementary content. In the source the left rail comes before the main column; a skip link takes keyboard readers straight to the main column.

API

ContentGrid.astro. Ported from the handoff with the same props; the rails are named slots.

SidebarCard, the card a rail holds. FloatingControls, which takes over a rail’s table of contents on a phone.