Object Hierarchy:

Object hierarchy for Grid


[ CCode ( type_id = "gtk_grid_get_type ()" ) ]
public class Grid : Widget, Accessible, Buildable, ConstraintTarget, Orientable

`GtkGrid` is a container which arranges its child widgets in rows and columns.

![An example GtkGrid](grid.png)

It supports arbitrary positions and horizontal/vertical spans.

Children are added using [method@Gtk.Grid.attach]. They can span multiple rows or columns. It is also possible to add a child next to an existing child, using [method@Gtk.Grid.attach_next_to]. To remove a child from the grid, use [method@Gtk.Grid.remove].

The behaviour of `GtkGrid` when several children occupy the same grid cell is undefined.

GtkGrid as GtkBuildable

Every child in a `GtkGrid` has access to a custom [iface@Gtk.Buildable] element, called `<layout>`. It can by used to specify a position in the grid and optionally spans. All properties that can be used in the `<layout>` element are implemented by [class@Gtk.GridLayoutChild] .

It is implemented by `GtkWidget` using [class@Gtk.LayoutManager].

To showcase it, here is a simple example:

```xml <object class="GtkGrid" id="my_grid"> <child> <object class="GtkButton" id="button1"> <property name="label"> Button 1</property> <layout> <property name="column">0</property> <property name="row">0</property> < /layout> </object> </child> <child> <object class="GtkButton" id="button2"> <property name="label">Button 2</property> <layout> <property name="column">1</property> <property name="row">0</property> </layout > </object> </child> <child> <object class="GtkButton" id="button3"> <property name="label">Button 3< /property> <layout> <property name="column">2</property> <property name="row">0</property> <property name="row-span">2</property> </layout> </object> </child> <child> <object class="GtkButton" id="button4"> <property name="label">Button 4</property> <layout> <property name="column">0</property> < property name="row">1</property> <property name="column-span">2</property> </layout> </object> </child > </object> ```

It organizes the first two buttons side-by-side in one cell each. The third button is in the last column but spans across two rows. This is defined by the `row-span` property. The last button is located in the second row and spans across two columns, which is defined by the `column-span` property.

CSS nodes

`GtkGrid` uses a single CSS node with name `grid`.


`GtkGrid` uses the gtk_accessible_role_group role.

Namespace: Gtk
Package: gtk4



Creation methods:


Inherited Members:

All known members inherited from class Gtk.Widget
All known members inherited from interface Gtk.Orientable