HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
GridView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorLays children out on a grid.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/grid'Preview
API ReferenceRoothelix-gridLays children out on a grid.
PropTypeDefaultDescriptionalign"start"|"center"|"end"|"stretch"Alignment of each cell within its row.columnsnumberFixed number of equal columns.gap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"Space between cells, named on the space scale.minstring""Minimum column width, filling as many as fit.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items to lay out.
CSS PropertyDescription--grid-columnsAn explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
ExamplesNameDescriptionAlignedRows whose items sit on one line rather than stretching to the tallest.Fixed ColumnsA named number of columns, for a layout that must not reflow.PreviewColumns that fit themselves to the width, no count given.Unequal TracksTwo tracks of different widths, which neither `columns` nor `min` can say.