Skip to main content

Grids

A Grid holds other nodes in rows and columns.

Grids are common in assessments. A grid is a convenient way to position things on the screen. For example, if you had a 3x3 tic-tac-toe grid, you could manually calculate the centers the cells. But it would be easier simply to specify by row and column: the pre-built Grid does this.

Below, we create a 3x3 Grid. We also create a Label that says "Hi!" and a purple rectangle Shape. To place them in the grid, we don't have to calculate their coordinates on the scene. We simply insert them into the grid at the row and column in which we want them to appear using the addAtCell() method.

Loading...
Explore:
  • Set the position of the object you are adding to the grid to offset the object instead of centering it in the grid cell.
  • Grids can be useful for aligning things when you hide the grid lines.
  • A Grid cell can hold almost any node -- Shape, Label, Sprite -- even another Grid! (But you can't put a Scene inside a Grid cell.)