Sidebar

The sidebar layout helper creates a pair of content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit alongside each other. One content panel is typically narrower than the other, acting as a "sidebar".

The outer container uses Flexbox. The gap property allows us to control the spacing between the panels. The point at which they sit side-by-side horizontally is determined by the flex-basis property on the narrower panel and min-inline-size on the wider panel. As there are no viewport media queries, the sidebar layout will nest nicely inside other containers.

CSS custom properties

--sidebar-main-width

Override the default width of the wide content panel, which is set to 60%

--sidebar-side-width

Override the default width of the sidebar panel, which is set to 15.625rem.

--sidebar-gap

Override the default spacing between the panels, which is set to 1.25rem.

Adding the sidebar--intrinsic modifier class will set the flex-basis to auto, to let the content of the sidebar determine how wide it is.