Layout container for a set of fields. Implements its own CSS Grid and reads column spans from data-span on light-DOM children.
Default layout — all fields stack vertically.
Fields side-by-side in two columns with medium gap.
Three columns with large gap.
Use data-span to make a field span multiple columns. data-span="full" spans all columns.
Section headings are plain slotted content with data-span="full". No extra element needed.
Set label-orientation="horizontal" to push labels to the left of fields.
Set dense to push size="sm" to all slotted fields and controls for compact forms.
A grid inside a narrow container collapses to fewer columns regardless of viewport width. This container is 350px wide, so a 3-column grid collapses to 1 column.
A Q360-shaped form with twelve fields mixing controls, section headings, and one full-width field.
Form grid in dark theme. All colours resolve through --theme-* tokens.