Grid

A layout that arranges UI elements in rows and columns, allowing for evenly spaced and organized components in Fyne applications.

Column Grid

Show Code

package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/widget"
)

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Column Grid")

  // Fixed number of columns (3 columns)
  gridCols := container.NewGridWithColumns(3,
    widget.NewButton("1", nil),
    widget.NewButton("2", nil),
    widget.NewButton("3", nil),
    widget.NewButton("4", nil),
    widget.NewButton("5", nil),
    widget.NewButton("6", nil),
  )

  myWindow.SetContent(gridCols)
  myWindow.Resize(fyne.NewSize(400, 400))
  myWindow.ShowAndRun()
}

Row Grid

Show Code

package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/widget"
)

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Row Grid")

  // Fixed number of rows (2 rows)
  gridRows := container.NewGridWithRows(2,
    widget.NewLabel("Row 1 - Col 1"),
    widget.NewLabel("Row 1 - Col 2"),
    widget.NewLabel("Row 2 - Col 1"),
    widget.NewLabel("Row 2 - Col 2"),
  )

  myWindow.SetContent(gridRows)
  myWindow.Resize(fyne.NewSize(400, 400))
  myWindow.ShowAndRun()
}

Grid Wrap

Show Code

package main

import (
  "fyne.io/fyne/v2"
  "fyne.io/fyne/v2/app"
  "fyne.io/fyne/v2/container"
  "fyne.io/fyne/v2/widget"
)

func main() {
  myApp := app.New()
  myWindow := myApp.NewWindow("Grid Wrap")

  // Grid wrap (items with fixed size)
  gridWrap := container.NewGridWrap(fyne.NewSize(80, 40),
    widget.NewLabel("A"),
    widget.NewLabel("B"),
    widget.NewLabel("C"),
    widget.NewLabel("D"),
    widget.NewLabel("E"),
  )

  myWindow.SetContent(gridWrap)
  myWindow.Resize(fyne.NewSize(400, 400))
  myWindow.ShowAndRun()
}