Grid

The 2D layout primitive: equal tracks, items spanning columns and rows.

Grid lays items into Columns equal-width tracks with row-major auto-flow — each item takes the first slot wide and deep enough for its spans, exactly the web's auto-placement. 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(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(gtx,
	lotusui.GridItem{RowSpan: 2, W: sidebar},
	lotusui.GridItem{ColSpan: 2, W: hero},
	lotusui.Cell(c),
	lotusui.GridItem{ColSpan: 4, W: footer},
)

API

Option	Type	Description
`Columns`	`int`	Number of equal-width tracks (repeat(N, 1fr)).
`Gap / RowGap / ColGap`	`unit.Dp`	Spacing; Gap covers both axes unless overridden.
`GridItem.ColSpan / .RowSpan`	`int`	Tracks the item spans; zero means 1. Cell(w) and Span(cols, w) are shorthands.