SimpleGrid

Equal cells: continuous minChildWidth or stepped Columns.

A lotusui extension. Continuous mode derives column count from available width / MinChildWidth (never below 1, never above MaxCols). Stepped mode sets Columns: Cols(…).At(…) against Theme breakpoints. Every cell in a row gets the tallest cell's height. Reach for Grid when you need explicit tracks and spans.

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

Usage — continuous columns

Columns derive from available width / MinChildWidth. Narrow the window and the grid reflows smoothly.

open demo ↗

lotusui.SimpleGrid(th, gtx, items, lotusui.SimpleGridProps{
	MinChildWidth: 140, MaxCols: 4, Gap: th.Space.SM,
}, cell)

Equal-height rows

A measure pass finds the tallest cell per row; every sibling gets that height as its minimum — cards in a row stay flush.

open demo ↗

lotusui.SimpleGrid(th, gtx, entries, lotusui.SimpleGridProps{
	MinChildWidth: 140, MaxCols: 3, Gap: th.Space.SM,
}, cell)

Stepped columns

When Columns is set, minChildWidth is ignored — same Chakra columns={{…}} idea as Grid.Cols.

open demo ↗

lotusui.SimpleGrid(th, gtx, items, lotusui.SimpleGridProps{
	Columns: lotusui.Cols(1).At("sm", 2).At("lg", 4),
	Gap:     th.Space.SM,
}, cell)

API

Option	Type	Description
`th`	`*Theme`	Breakpoints for stepped Columns / Gaps.
`items`	`[]T`	One cell per item, any type.
`SimpleGridProps.MinChildWidth`	`unit.Dp`	Continuous mode: width / this → columns.
`SimpleGridProps.MaxCols`	`int`	Continuous mode upper bound.
`SimpleGridProps.Columns`	`ResponsiveInt`	Stepped mode when Set().
`SimpleGridProps.Gap / Gaps`	`unit.Dp / ResponsiveDp`	Spacing between cells.
`cell`	`func(C, T) D`	Renders one item — a tile, a Card, anything.