Skip to content
Documentation
Components
Layout
Grid

Grid

A grid arranges grid cells in rows and columns. For simple cases set the number of columns and add the cells in reading order; cells can span several columns or rows. For overlapping or sparse layouts, set rows, columns and the start and end positions of each cell explicitly.

Grid

return Grid(
	GridCell(Text("ColSpan(3)")).ColSpan(3).BackgroundColor("#FDE2C4").Padding(Padding{}.All(L8)),
	GridCell(Text("A")).BackgroundColor("#C9E7F8").Padding(Padding{}.All(L8)),
	GridCell(Text("B")).BackgroundColor("#C9E7F8").Padding(Padding{}.All(L8)),
	GridCell(Text("C")).BackgroundColor("#C9E7F8").Padding(Padding{}.All(L8)),
	GridCell(Text("D")).BackgroundColor("#D8F0D2").Padding(Padding{}.All(L8)),
	GridCell(Text("E")).BackgroundColor("#D8F0D2").Padding(Padding{}.All(L8)),
	GridCell(Text("F")).BackgroundColor("#D8F0D2").Padding(Padding{}.All(L8)),
).Columns(3).
	Gap(L8).
	Widths(L120, "1fr", L120).
	Frame(Frame{Width: L480})

Widths and Heights take any Length; the CSS fraction unit fr distributes the remaining space.

Constructors

ConstructorDescription
Grid(cells ...TGridCell) TGridCreates a new grid containing the given cells.

Methods

MethodDescription
AccessibilityLabel(label string) DecoredViewSets the accessibility label of the grid, used by screen readers.
Append(cells ...TGridCell) TGridAdds one or more cells to the grid.
BackgroundColor(backgroundColor Color) DecoredViewSets the background color of the grid.
Border(border Border) DecoredViewSets the border styling of the grid.
ColGap(g Length) TGridSets the horizontal spacing between columns in the grid.
Columns(cols int) TGridSets the amount of columns explicitly.
Font(font Font) DecoredViewSets the font style applied to text inside the grid.
Frame(fr Frame) DecoredViewSets the layout frame of the grid, including size and positioning.
FullWidth() TGridSets the grid to span the full available width.
Gap(g Length) TGridSets RowGap and ColGap equally.
Heights(rowHeights ...Length) TGridSets optional row heights from top to bottom.
Padding(padding Padding) DecoredViewSets the inner spacing around the grid.
RowGap(g Length) TGridSets the vertical spacing between rows in the grid.
Rows(rows int) TGridSets the amount of rows explicitly.
Visible(visible bool) DecoredViewControls the visibility of the grid; setting false hides it.
Widths(colWidths ...Length) TGridSets optional column widths from left to right; undefined widths share the remaining space.
WithFrame(fn func(Frame) Frame) DecoredViewApplies a transformation function to the grid’s frame and returns the updated component.

Related