Gio Grid example using Flex

grid.go

package main

import (
	"image"

	"gioui.org/app"
	"gioui.org/f32"
	"gioui.org/io/system"
	"gioui.org/layout"
	"gioui.org/op/paint"
	"gioui.org/unit"
)

func main() {
	go func() {
		w := app.NewWindow()
		gtx := layout.NewContext(w.Queue())
		for e := range w.Events() {
			if e, ok := e.(system.FrameEvent); ok {
				gtx.Reset(e.Config, e.Size)
				ncols := 10
				weight := 1 / float32(ncols)
				var columns []layout.FlexChild
				for i := 0; i < ncols; i++ {
					columns = append(columns,
						layout.Flexed(weight, func() {
							layoutColumn(gtx)
						}),
					)
				}
				layout.Flex{}.Layout(gtx, columns...)
				e.Frame(gtx.Ops)
			}
		}
	}()
	app.Main()
}

func layoutColumn(gtx *layout.Context) {
	var children []layout.FlexChild
	for i := 0; i < 5; i++ {
		children = append(children,
			layout.Rigid(func() {
				layoutRect(gtx)
			}),
		)
	}
	layout.Flex{Axis: layout.Vertical}.Layout(gtx, children...)
}

func layoutRect(gtx *layout.Context) {
	layout.UniformInset(unit.Px(10)).Layout(gtx, func() {
		cs := gtx.Constraints
		paint.PaintOp{Rect: f32.Rectangle{
			Max: f32.Point{
				X: float32(cs.Width.Max),
				Y: float32(cs.Width.Max),
			},
		}}.Add(gtx.Ops)
		gtx.Dimensions = layout.Dimensions{
			Size: image.Point{
				X: cs.Width.Max,
				Y: cs.Width.Max,
			},
		}
	})
}