A common responsive layout in which there is a "sidebar" of a fixed width, and a content area that is flexible. This implementation switches to a vertical layout the moment the flexible content gets too little space left within the targeted (wrapper) element. By default, items are stretch vertically within the parent wrapper.


<div class="sidebar --left --threshold-{z}">
Implementation tip(s)!

1. The sidebar layout pattern does not have to be applied to an entire page. You can even apply it to a "searchbar". The input bar is the flexible content, but the search button is of a fixed content. If there is not enough room, they switch to a vertical layout.

2. There is a custom property called --layout-inline-size, set to 60% to calculate the breaking point of this layout. If you want a different breaking point, you can overwrite this custom property. There are class utilities available.


Custom propertyDefaultDescription
--layout-threshold0Sets the "fixed width" of the sidebar child element
--layout-gap0Sets the gap of the targeted element
--layout-inline-size60%Sets the min-width of the flexible content child element

Utility classes

Class nameRequired?Description
--threshold-{z}RequiredControls the --layout-threshold API
--gap-{z}Controls the --layout-gap API
--left/--rightRequiredSets which element is the fixed width sidebar