Component Detail
Grid
Responsive grid layout for repeated content.
Example
References
- Template
templates/components/grid.html- Golden
testdata/golden/grid.golden.html
Go (Marionette) Example
This implementation example uses Marionette in Go. Source: docs/site-astro/public/examples/go/grid.go
package goexamples
import (
mb "github.com/YoshihideShirai/marionette/backend"
mf "github.com/YoshihideShirai/marionette/frontend"
)
func RegisterGridExample(app *mb.App) {
app.Page("/grid", func(ctx *mb.Context) mf.Node {
return mf.Grid(mf.GridProps{Columns: "3", Gap: "lg"},
mf.Card(mf.CardProps{Title: "Users"}, mf.TextComponent(mf.TextProps{Text: "24"})),
mf.Card(mf.CardProps{Title: "Teams"}, mf.TextComponent(mf.TextProps{Text: "6"})),
mf.Card(mf.CardProps{Title: "Alerts"}, mf.TextComponent(mf.TextProps{Text: "1"})),
)
})
}