A quick way to create a layout.

<web-panels>
  <panel top>Main menu</panel>
  <panel left>Filter</panel>
  <panel main>Content</panel>
  <panel right>Inspector</panel>
  <panel bottom>Status bar</panel>
</web-panels>

Browser preview

<panel top>...</panel> <panel left>...</panel> <panel main>...</panel> <panel right>...</panel> <panel bottom>...</panel>

Download webcomponent
API Reference
What it does
Contact

API reference

Attributes on <web-panels>

Attribute	Values	Effect
`cssfrom`	`default` (default when absent), `demo`, `css`	Selects the style preset written into the shadow `<style>`. Changing it at runtime re‑styles immediately; leaving `demo` also clears the inline colors it added.

No other attributes are observed. Anything else you set on the host is ignored (but still styleable from your page).

Attributes on <panel>

Attribute	Grid area	Notes
`main`	`main`	Centre cell, `1fr` wide and tall.
`top`	`top`	Spans all three columns.
`bottom`	`bottom`	Spans all three columns.
`left`	`left`	Min width 300px.
`right`	`right`	Min width 300px.
`overlay`	—	Takes the panel out of flow (`position: absolute`). Combine with a direction.
`overlay left`	`main`	Pinned to the left edge of `main`, full height, `z-index: 10`. 80% wide under 767px.
`overlay right`	`main`	Pinned to the right edge of `main`, full height, `z-index: 10`. 80% wide under 767px.
`overlay top`	`top`	Full width, `z-index: 20`.
`overlay bottom`	`bottom`	Full width, `z-index: 20`.
`sticky`	—	`position: sticky`; adds `top: 0` with `top` and `bottom: 0` with `bottom`. Only has room to move if the panel's row is taller than the panel.
none	—	Auto‑placed by the grid in document order.

What it does

Attaches an open shadow root containing just a <style> and a <slot>. Your markup stays in the light DOM and is projected into the grid.
The host itself is a CSS grid with three columns (auto 1fr auto) and three rows (auto 1fr auto), wired to named grid areas.
Each <panel> is placed by a single attribute: top, left, main, right, bottom.
overlay lifts a panel out of the flow and pins it over its area (drawers, sheets, banners).
sticky applies position: sticky, with top:0 / bottom:0 when combined with top / bottom.
The host declares itself a container (container: webpanels / inline-size) and ships a @container (max-width: 767px) block for narrow layouts.
The cssfrom attribute swaps between styling presets at runtime.

Things to watch out for

The host needs a height. :host { height: 100% } resolves against the parent, so either size the parent or set a height on <web-panels>.
Panels have min-width: 300px. Three columns therefore need roughly 940px before the layout stacks, which is well above the 767px breakpoint — expect horizontal squeeze in between.
A container cannot style itself. See the note in the "Narrow layouts" section.
Overlays are always rendered. The component only positions them; visibility is your job.
Attribute changes are the only reactivity. There is no property/JS API, and _updateDemoColors() runs once per cssfrom change — panels added later are not colored until you change the attribute again.

Contact

Any questions, recommendations, or comments on this web component? Feel free to help me improve.