Grid

日本語

Grid places controls at explicit rows and columns with spans, expansion, and alignment.

Appearance

Runnable example

require "uing"

UIng.init

window = UIng::Window.new("Grid Example", 300, 200, margined: true)
window.on_closing do
  UIng.quit
  true
end

grid = UIng::Grid.new(padded: true)

# Create a simple 3x3 grid layout
labels = [
  "Top Left", "Top Center", "Top Right",
  "Middle Left", "Center", "Middle Right",
  "Bottom Left", "Bottom Center", "Bottom Right",
]

labels.each_with_index do |text, index|
  row = index // 3
  col = index % 3

  label = UIng::Label.new(text)
  grid.append(label, col, row, 1, 1, true, :fill, true, :fill)
end

# Add a button that spans 2 columns at the bottom
button = UIng::Button.new("Span Button")
button.on_clicked do
  window.msg_box("Grid Demo", "This button spans 2 columns!")
end
grid.append(button, 0, 3, 2, 1, true, :fill, false, :fill)

# Add another button in the remaining space
another_button = UIng::Button.new("Single")
another_button.on_clicked do
  window.msg_box("Grid Demo", "Single column button!")
end
grid.append(another_button, 2, 3, 1, 1, true, :fill, false, :fill)

window.child = grid
window.show

UIng.main
UIng.uninit

Usage notes

left is the column and top is the row, both zero-based. xspan and yspan specify how many columns and rows a control occupies.

grid = UIng::Grid.new(padded: true)
grid.append(UIng::Button.new("Span"),
  left: 0, top: 1, xspan: 2, yspan: 1,
  hexpand: true, halign: :fill, vexpand: false, valign: :fill)

hexpand and vexpand expand columns and rows; halign and valign set placement within them. Dashed outlines show allocated space; blue rectangles show children.

If another child expands the same column, a child with hexpand: false and :fill also grows. The vertical direction works the same way. :start and :end keep the required size at the start or end of the allocation.

padded: true adds standard spacing between cells.

Related example

API reference · Gallery source