HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
GridView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA layout that places its children on a grid.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/grid'Preview
API ReferenceRoothelix-gridA layout that places its children on a grid.
PropTypeDescriptionalignItems"start"|"center"|"end"|"stretch"How each cell aligns within its row. Sets align-items.autoFlow"row"|"column"|"dense"|"column-dense"How cells fill the grid when no child places itself, set as
grid-auto-flow.columnGap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"The space between columns, as a step on the space scale. Wins over gap
across the row.columnsnumberA fixed number of equal columns.gap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"The space between cells, as a step on the space scale.justifyItems"start"|"center"|"end"|"stretch"How each cell aligns within its column. Sets justify-items.minstringDefault""The minimum column width. The grid fits as many columns as the width allows.rowGap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"The space between rows, as a step on the space scale. Wins over gap down
the column.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items to lay out.
CSS PropertyDescription--grid-areasThe named areas, as grid-template-areas takes them, such as "rail main". A child takes its area with grid-area.--grid-columnsAn explicit track list. It overrides min and columns. Use it for tracks of unequal widths, which neither attribute can set.--grid-rowsAn explicit row track list, such as auto minmax(0, 1fr) auto. Rows are sized by their content when it is unset.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAlignedRows whose items are centered on one line, each at its own height.Fixed ColumnsA fixed number of columns, for a layout that must not reflow.PreviewColumns that fit the available width, with no count set.SpansA heading across every column, and a card two columns wide.Unequal TracksTwo tracks of different widths, set with --grid-columns.