Grid

The 2D layout primitive: equal tracks, spans, and stepped columns.

Grid lays items into equal-width tracks with row-major auto-flow — each item takes the first slot wide and deep enough for its spans. Fixed Columns, or stepped Cols: Cols(1).At("md", 2).At("lg", 4) against Theme breakpoints. Row heights derive from content; spanning items stretch.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add grid

Col span

open demo ↗

lotusui.Grid{Columns: 4, Gap: th.Space.SM}.Layout(th, gtx,
	lotusui.Span(2, a), lotusui.Cell(b), lotusui.Cell(c),
	lotusui.Cell(d), lotusui.Cell(e),
)

Spanning rows and columns

open demo ↗

lotusui.Grid{Columns: 4, Gap: th.Space.SM}.Layout(th, gtx,
	lotusui.GridItem{RowSpan: 2, W: sidebar},
	lotusui.GridItem{ColSpan: 2, W: hero},
	lotusui.Cell(c),
	lotusui.GridItem{ColSpan: 4, W: footer},
)

Responsive columns

When Cols is set it wins over Columns. Resize — track count follows Theme breakpoints (defaults: md=768, lg=992).

open demo ↗

lotusui.Grid{
	Cols: lotusui.Cols(1).At("md", 2).At("lg", 4),
	Gap:  th.Space.SM,
}.Layout(th, gtx, items...)

API

Option	Type	Description
`Columns`	`int`	Fixed track count when Cols unset (min 1).
`Cols`	`ResponsiveInt`	Stepped columns; Cols(n).At("md", 2). When Set(), overrides Columns.
`Gap / RowGap / ColGap`	`unit.Dp`	Spacing; Gap covers both axes unless overridden.
`Gaps`	`ResponsiveDp`	Stepped gap for both axes when Set().
`GridItem.ColSpan / .RowSpan`	`int`	Tracks the item spans; zero means 1. Cell(w) and Span(cols, w) are shorthands.
`GridItem.ColSpans / .RowSpans`	`ResponsiveInt`	Stepped spans when Set().
`Layout(th, gtx, items…)`	`method`	Needs Theme for breakpoint resolve.